Maken van Een Aangepaste HTML5 Audio Player

() translation by (you can also view the original English article)

Tijdens deze tutorial ben ik gaan introduceren je naar HTML5 audio en toont je hoe je je eigen speler kunt maken.

Als je wilt nemen een snelkoppeling, neem een kijkje op de kant en klare HTML5 Audio Player beschikbaar op Envato Markt. Het laat je afspeellijsten maken van een verscheidenheid van bronnen, en wordt geleverd met een reusachtige waaier van customization opties.

Ook vindt je tal van HTML5 deskundigen op Envato Studio om je te helpen.

Introductie

Totdat uitvoering nu van audio in een webproject is een vervelend proces vertrouwen zwaar op 3rd party plugins, zoals Flash. Sinds de iPhone's beruchte niet aanvaarding van de plugin en het nieuws dat Adobe Flash niet langer voor mobiel steunen zal, kijken veel ontwikkelaars naar andere manieren om audio opnemen in hun projecten. Dit is waar de HTML5 audio stappen in het probleem op te lossen.

Maar HTML5 een standaard biedt voor het afspelen van audio bestanden op het web, het is nog in de kinderschoenen en heeft nog een lange weg te gaan voordat het alles bieden kan dat andere plugins, zoals Flash audio biedt. In de, meeste gevallen, is het echter meer dan voldoende.

Eenvoudige Html5 Audio

De eenvoudigste manier om audio in een web pagina met behulp van HTML5 is het gebruik van de nieuwe audio tag. Voeg dit toe aan je HTML5 document met de volgende code:

<audio controls="controls">
  <source src="track.ogg" type="audio/ogg" />
  <source src="track.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

Als je een kijkje op de bovenstaande code nemen kunt je zien dat ik heb verklaard de <audio>tag en het attribuut van de besturingselementen, gedefinieerd, zodat we de standaardbesturingselementen voor de speler zien.

Geneste in de <audio>we hebben 2 'src' tags. Men definieert een MP3 track en de andere definieert de OGG indeling. Het OGG formaat wordt vooral gebruikt om de muziek te spelen in Firefox als wegens licentieproblemen Firefox biedt geen ondersteuning voor MP3 zonder gebruik te maken van een plugin. Een reeks tekst Uw browser ondersteunt het audio-element niet. gebruikers kunnen met unsupporting browsers weten wat er gaande is.

De standaard HTML5 audio player

Html5 Audio Tag Kenmerken

De tag ondersteunt evenals de globale kenmerken van HTML5 ondersteunen ook een set kenmerken die uniek zijn voor zichzelf.

autoplay - dit kan worden ingesteld op "true" of links leeg "" om te bepalen of het spoor automatisch te spelen moet zodra de pagina wordt geladen.
controls - Zoals te zien is in het bovenstaande voorbeeld, definieert dit of de native controls zoals 'play, pause' etc getoond moeten worden.
lus - dit kan worden ingesteld op "loop" en bepaalt of de track opnieuw spelen moet, zodra het klaar is.
preload - dit kan worden ingesteld op "auto" (die beschrijft of het bestand zodra de pagina wordt geladen laden moet), "metadata" (waarin wordt beschreven of alleen de metadata, tracktitel etc. moet worden geladen), 'geen' (die dicteert dat de browser het bestand mag niet worden geladen wanneer de pagina wordt geladen).
src - Dit is ook te zien in het bovenstaande voorbeeld en definieert de URL van de muziek die door de audiotag zou moeten worden afgespeeld.

Starten met Eleven

In de laatste paar stappen hebben we gekeken de eenvoudigste vorm van HTML5 audio. Wanneer we beginnen met het gebruik van de audio tag met javascript kunnen we beginnen met het maken van een aantal echt interessante en nuttige audio spelers. Neem een blik bij wat jQuery voor ons kan doen. Nadat we klaar voor documentin jQuery hebben gedefinieerd, kunnen we een nieuwe audiovariabele maken om ons audiobestand zo simpel te houden als dit:

1	var myaudio = new Audio('mysong.mp3');

Het is echt zo eenvoudig! Vervolgens wanneer we maar willen een actie uitvoeren op de audio we kan leiden tot het met behulp van de variabele 'myaudio'. Hier is een lijst van acties die we met de variabele nemen kunnen. Maak een notitie van deze, we gaan gebruiken sommigen van hen later in de tut wanneer we maken onze audio speler...

myaudio.play(); - This will play the music.
myaudio.pause(); - This will stop the music.
myaudio.duration; - Returns the length of the music track.
myaudio.currentTime = 0; - This will rewind the audio to the beginning.
myaudio.loop = true; - This will make the audio track loop.
myaudio.muted = true; - This will mute the track

Als je wilt dat een functie wordt aangeroepen als de audio eenmaal is afgespeeld, kun je 'myaudio.addEventListener ('ended ', myfunc)' gebruiken. - Dit zal 'myfunc()' roepen zodra het geluid klaar is.

Maken van de HTML5 Audio Player: Markup

Nu dat je een beetje achtergrond op HTML5 audio hebt en begrijpen van de basisprincipes, dat het is tijd om deze in praktijk en een op maat gemaakte HTML5 audio speler maken. Ik zal missen de ontwerpfase als het valt buiten de werkingssfeer van deze tutorial, maar je kunt downloaden van de bijbehorende broncode en blader door de PSD naar het krijgen van een idee over hoe het samengesteld.

De bovenkant van het document bestaat uit het HTML5 doctype. Yahoos CSS opnieuw instelt, de Google weblettertype 'Kreeft' voor de titel. Dan hebben we de laatste jQuery en de aangepaste JavaScript bestand js.js. Fnally we hebben html5slider.js, waardoor Firefox de HTML5 invoerbereik type, die we voor de Gaszuiveraar van de audio gebruiken zullen wilt weergeven.

<!DOCTYPE html>
<head>
  <title>HTML5 Audio Tutorial</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/js.js"></script>
	<script type="text/javascript" src="js/html5slider.js"></script>
</head>

Ik heb na de h1 titel een div element gemaakt met een klasse van de "container" en "gradient". Ik heb een aparte klasse van verloop gemaakt als dit zal worden hergebruikt op sommige andere elementen. Binnen ".container" heb ik een beeld (die zal worden de albumcover), dan de drie ankertags zal fungeren als de besturingselementen voor de speler. Hiertussen vindt je de scrubber/HTML5 bereik invoerveld.

<body>

	<h1>HTML 5 Audio Player</h1>

	<div class="container gradient">
		
		<img class="cover" src="images/cover.jpg" alt="">

		<div class="player gradient">

			<a class="button gradient" id="play" href="" title=""></a>
			<a class="button gradient" id="mute" href="" title=""></a>
		
				<input type="range" id="seek" value="0" max=""/>
	
			<a class="button gradient" id="close" href="" title=""></a>
			
		</div><!-- / player -->
		
	</div><!-- / Container-->
</body>
</html>

Maken van de HTML5 Audio Player: Stijlen

In plaats van elk aspect van de CSS regels doorlopen, 'm I gonna geven je een overzicht en Let op eventuele specifieke delen je aandacht te besteden aan.

In de onderstaande code heb ik gemaakt het verloop voor de speler die is gegenereerd met behulp van deze CSS gradient editor. Ik heb vervolgens de speler ".container" gemaakt met enkele CSS3 overgangen.

Je zult merken dat ik gebruikte ook het vak van de CSS3 dimensionering kenmerkset aan 'grens-box'. Dit zorgt voor de opvulling van de 10px rond de container worden opgenomen binnen de breedte die ik, in dit geval 427px aangegeven heb. Als ik dit niet had gebruikt de padding zou worden toegevoegd aan de 427px groter is dan ik eigenlijk wil het maken van de container. Het gebruikelijk deze dagen steeds om toe te passen * {vak-sizing:grens-box;} die daadwerkelijk zorgt voor een meer intuïtieve manier van styling.

Ik heb ook toegevoegd sommige CSS3 overgangen naar ".coverlarge" mogelijk te maken voor enkele mooie overgangen wanneer de speler voor het eerst wordt geopend. De CSS kan kijken een beetje overweldigend aanvankelijk, maar veel hiervan is specifieke browser voorvoegsels om ervoor te zorgen dat de audiospeler kijkt en werkt op dezelfde manier in verschillende browsers.

.gradient {
	border: 1px solid black;

	-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
	background: #494949; /* Old browsers */
background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

	background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
	background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */
-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */
}

.container {
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
	position: absolute;
	width: 427px;
	height: 70px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
	top: 50%;
	left: 50%;
	margin: -214px 0px 0px -214px;
	padding: 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


.containerLarge {
	height: 427px;
}

.cover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	width: 398px;
	height: 10px;
	border: 2px solid black;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
	-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
	box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
}

.coverLarge {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	height: 398px;

	-webkit-transition: opacity .7s ease;
	-moz-transition: opacity .7s ease;
	-o-transition: opacity .7s ease;
	-ms-transition: opacity .7s ease;
	transition: opacity .7s ease;

	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

Hoe de audiospeler eruit moet zien in dit stadium

Zodra de container voor de speler voltooid is, is het tijd om de werkelijke besturingselementen te maken. De meerderheid van de knoppen zijn gemaakt met behulp van CSS sprites

IE ondersteunt helaas nog niet de HTML5 bereik dus ik besloten heb niet te geven IE de Gaszuiveraar van de audio ingang. Bent je in een positie waar dat is niet aanvaardbaar, kunt je de schuifregelaar jQuery UI op een gelijkaardige manier aan de methode die ik heb gebruikt. Toch heb ik ervoor gekozen om eenvoudig verbergen de scrubber, vandaar het invoeren van {display:none\9!belangrijk;} Dit verbergt in principe de invoer van ie gebruikers (check deze draad op Stack Overflow voor meer informatie over de \9).

Het probleem met de schuifregelaar HTML5 bereik is dat slechts enkele browsers aangepaste styling ondersteunen voornamelijk webkit browsers (Chrome en Safari). Opera en Firefox zal alleen weergeven de schuifregelaar van een standaard bereik, helaas. Als je hoeft aangepaste styling in alle browsers kunt je de schuifregelaar jQuery UI zoals eerder vermeld. Ziet je de aangepaste styling voor webkit browsers in de input:: -webkit-schuifregelaar-duim kenmerk.

.player {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	width: 300px;
	bottom: 10px;
	width: 95%;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 5px;
}

.button {
	display: block;
	width: 34px;
	height: 34px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 5px;
}

#play {
	background-position: 6px 5px;
}

#pause {
	background-position: -32px 5px;
}

#mute {
	background-position: -63px 5px;
}

#muted {
	background-position: -106px 5px;
}

input[type="range"] {
	width: 250px;
	margin-top: -5px;
}

#close {
	float: right;
	background-position: -146px 5px;
	display: none;
}

.volume {
	position: absolute;
	height: 100px;
	width: 34px;
	border: 1px solid black;
	background-color: #242323;
	top: -97px;
	display: none;
}
input{
	display:none\9!important;
}
input[type="range"] {
	-webkit-appearance: none;
	border: 1px solid black;
	position: absolute;
	top: 18px;
	display: block;
	width: 63%;
	height: 15px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #242323;
	left: 90px;

	-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
	-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
	box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
}

input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border:1px solid black;

	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #80e4df; /* Old browsers */
background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

	background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
	background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
	background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
}

Maken van de HTML5 Audio Player: jQuery

Zodra de styling en markup heeft gedaan is het tijd om de speler eigenlijk tot leven komen. We kunnen dit doen met behulp van de jQuery javascript framework. Zodra de jQuery klaar voor document is gedeclareerd, maken wij sommige variabelen waarbinnen we onze jQuery objecten kunnen opslaan.

container = $('.container');
	cover = $('.cover');
	play = $('#play');
	pause = $('#pause');
	mute = $('#mute');
	muted = $('#muted');
	close = $('#close');
	song = new Audio('music/track1.ogg','music/track1.mp3');
	duration = song.duration;

In de "song" ziet variabele boven je dat we twee tracks hebt gedeclareerd. Het OGG formaat voor Firefox en MP3 voor andere browsers. Vervolgens maak ik een voorwaardelijke IF instructie, zodat we kunnen controleren of de browser MP3's kan spelen of niet. Als dat lukt, dan zorgen we ervoor dat de "song" variabele de MP3 track ophaalt zo niet dan zal het de 'OGG'-indeling afspelen.

if (song.canPlayType('audio/mpeg;')) {
  	song.type= 'audio/mpeg';
  	song.src= 'music/track1.mp3';
	} else {
  	song.type= 'audio/ogg';
  	song.src= 'music/track1.ogg';
	}

De volgende dingen die we gonna maken zijn Klik op functies die ons toelaten zal om afspelen en pauzeren van de muziek. Ik gebruik de audio actie play() om te starten van de audio, en gebruik vervolgens de jQuery methode replaceWith die in feite de knop afspelen met de pauzeknop vervangt.

Ik heb ook de klassen "coverLarge" en "containerLarge" toegevoegd aan de "container" en "dekking". Zoals ik heb CSS3 overgangen toegevoegd aan deze eerder in de CSS zal dit een mooie overgang toevoegen wanneer de audio wordt afgespeeld. De functie "pauze" werkt op een vergelijkbare manier, maar zonder de overgangen. Wanneer geklikt, vervangt het de pauzeknop met de toets "play".

play.live('click', function(e) {
		e.preventDefault();
		song.play();

		$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');
		container.addClass('containerLarge');
		cover.addClass('coverLarge');
		$('#close').fadeIn(300);
		$('#seek').attr('max',song.duration);
	});

	pause.live('click', function(e) {
		e.preventDefault();
		song.pause();
		$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

	});

De knoppen Dempen en gedempte werken op dezelfde manier aan het spel en onderbreken knoppen, maar bel de gerelateerde acties en de knoppen vervangen door passende alternatieven.

mute.live('click', function(e) {
		e.preventDefault();
		song.volume = 0;
		$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');

	});

	muted.live('click', function(e) {
		e.preventDefault();
		song.volume = 1;
		$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');

	});

Wanneer de gebruiker klikt op de knop "sluiten" noemen we jQuery om te verwijderen van de klassen "containerLarge" en "coverLarge". Dit zal verbergen van de cover en sluit de speler back up. We onderbreken de speler door te bellen naar de pause() actie en reset van de audio currentTime te gelijk zijn aan 0. Dit stelt het spoor terug naar het begin.

$('#close').click(function(e) {
		e.preventDefault();
		container.removeClass('containerLarge');
		cover.removeClass('coverLarge');
		song.pause();
		song.currentTime = 0;
		$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
		$('#close').fadeOut(300);
	});

Het is nu tijd om te verhuizen naar de audio scrubber die een id van "zoeken" heeft gekregen. De eerste functie is het laten toe om de scrubber naar elk deel van de audio. Dit wordt gedaan door het detecteren van een verandering wanneer iemand de scrubber beweegt. Vervolgens stellen we de song.currentTime aan het deel van het lied dat de scrubber is verhuisd naar. We stellen ook het max kenmerk aan de duur van het nummer.

1	$("#seek").bind("change", function() {
2	song.currentTime = $(this).val();
3	$("#seek").attr("max", song.duration);
4	});

Het laatste deel van de jQuery is dat de Gaszuiveraar van de "#seek" samen met de duur van de audio. We doen dit door een gebeurtenislistener toe te voegen en wanneer de audiotijdupdates we de functie noemen. Ik stel een variabele van het "curtime" om de huidige songtime. Ik update vervolgens de waarde van de scrubber om na te denken van de huidige tijdpositie van de audio.

1	song.addEventListener('timeupdate',function (){
2	curtime = parseInt(song.currentTime, 10);
3	$("#seek").attr("value", curtime);
4	});

En daar heb je het! Een HTML5 audio speler die je op je site of app uitvoeren kunt.

Conclusie

Zoals eerder vermeld, HTML5 audio is nog in de kinderschoenen en nog ruimte voor verbeteringen. Op dit moment de audio is ontworpen voor het afspelen van muziek en zal daarom altijd het streamen van audio van de server, wat resulteert in sommige browsers hebt je problemen met afspelen. Het is niet altijd een probleem, maar gewoon betekent dat het soms betalen beginnen zal voordat het geluid volledig is gedownload.

Dit kan potentieel een probleem zijn als je wilt gebruik van HTML5 audio voor zulke dingen als geluidseffecten in games, of audio intensieve apps. Om deze reden hebben onze vrienden bij Google komen met een methode ter verbetering van de audio tag zwakke punten. Google hebben gebouwd en een voorstel gedaan aan de W3C naar de "Web Audio API". Dit blijkt te zijn een stuk krachtiger dan native HTML5 audio, maar het probleem dat in dit stadium is (kun je raden?!) werkt het slechts in Chrome.

Je kunt lees meer over Google het Web Audio API en zie enkele voorbeelden op Google code of kijk op de web audio specificatie.

Ik hoop dat je genoten leren over HTML5 audio en hoe kunt je uw eigen spelers. Mijn speler omvat fundamentele controles, maar er is niets om te stoppen met je het toevoegen van meer functies, zoals volumeregeling en zelfs de toevoeging van je eigen aangepaste animaties. Met een beetje van gedachte en experimenten kunt echt je sommige grote audio spelers. Download de broncode en ik zal kijken uit naar wat je omhoog met komen!

En als je zien meer opties wilt voor het werken met audio-spelers en andere media in HTML5, check out de HTML5 Media items op Envato markt.