Javascript audio speler

Met de html audio-tag is het mogelijk audiobestanden in de webbrowser af te spelen. Daarbij is het mogelijk gebruik te maken van de standaard meegeleverde ‘controls’, maar natuurlijk is het stijlvoller om de vormgeving van de audio-controls af te stemmen op de website waar de audio geplaatst wordt. Dat is mogelijk door zelf besturingselementen te maken en die met Javascript de audio-tag aan te sturen.

Om te beginnen hebben we een audio-tag nodig. Omdat niet alle browsers dezelfde audiobestanden kunnen afspelen gebruiken we 2 source-tags voor verschillende versies van hetzelfde audio bestand. De audio-tag plaatsen we in een div met de class-naam ‘audioSpeler’.

<body>
     <div class=”audioSpeler”>
          <audio>
              <source src=”sound.mp3″ type=”audio/mp3″/>
              <source src=”sound.wav” type=”audio/wav”/>
          </audio>
     </div>
</body>

Als we het resultaat testen in de browser is er niets te zien of te horen. Een audio-tag is zelf niet zichtbaar. Omdat we niet hebben aangegeven dat we de standaard ‘controles’ van de browser willen gebruiken, zijn die controls ook niet te zien. De browser is ingesteld om een audio bestand meteen te pauzeren, daarom is er niets te horen. We maken nu eerst een afspeelknop (p-tag met de tekst ‘start’) zodat we die kunnen gebruiken om het afspelen te starten. We plaatsen de afspeelknop in een div met de naam ‘knoppen’ zodat we later makkelijk meer functionaliteit toe kunnen voegen. Als op de knop geklikt wordt, wordt de functie  ‘afspelen()’ uitgevoerd.

<body>
     <div class=”audioSpeler”>
          <div class=”knoppen”>
               <p onclick=”afspelen()”>start</p>
          </div>
          <audio>
               <source src=”sound.mp3″ type=”audio/mp3″/>
               <source src=”sound.wav” type=”audio/wav”/>
          </audio>
     </div>

<script type=”text/javascript”>
function afspelen()
{

}
</script>
</body>

Om het audiobestand te kunnen afspelen met Javascript, moet Javascript de audio-tag eerst kunnen vinden. Daar maken we een variabel met de naam ‘audio’ voor aan. In onderstaand voorbeeld geven weJavascript eerst de opdracht de (eerste) audiospeler te zoeken en daarna binnen de audiospeler te zoeken naar de (eerste) audio-tag.

<script type=”text/javascript”>
var audioSpeler=document.getElementsByClassName(“audioSpeler”)[0];
var audio=audioSpeler.getElementsByTagName(“audio”)[0];

function afspelen()
{

}
</script>

Vervolgens kunnen we de functie ‘afspelen()’ gebruiken om de opdracht te geven het audio bestand af te spelen:

<script type=”text/javascript”>
var audioSpeler=document.getElementsByClassName(“audioSpeler”)[0];
var audio=audioSpeler.getElementsByTagName(“audio”)[0];

function afspelen()
{
     audio.play();
}
</script>

Vaak wordt de afspeelknop gebruikt om een het afspelen te starten, maar ook te stoppen: Als de speler is gepauzeerd moet het afspelen gestart worden, als de speler al afspeelt moet het afspelen gepauzeerd worden. Dat is eenvoudig te bereiken door ‘if()’ en ‘else’ te gebruiken. Javascript kan de eigenschappen van de audio-tag lezen. Een van die eigenschappen is ‘paused’. We laten Javascript kijken of de audio-tag gepauzeerd is. Als dat zo is moet de audio-tag afgespeeld worden. Anders, als de audio-tag niet gepauzeerd is, moet de audio-tag gepauzeerd worden.

<script type=”text/javascript”>
var audioSpeler=document.getElementsByClassName(“audioSpeler”)[0];
var audio=audioSpeler.getElementsByTagName(“audio”)[0];

function afspelen()
{
     if(audio.paused==true)
     {
          audio.play();
     }
     else
     {
          audio.pause();
     }
}
</script>

Als we ons script testen in de browser is het duidelijk te horen of het audio bestand afgespeeld wordt of niet, maar het communiceert beter als dat ook te zien is. Eerst gebruiken we een variabel met de naam ‘startKnop’ om Javascript de startknop te laten zoeken (de eerste p-tag van de audiospeler). Daarna gebruiken we de opdracht ‘innerHTML’ om de tekst van de startknop aan te passen als de werking daarvan verandert.

<script type=”text/javascript”>
var audioSpeler=document.getElementsByClassName(“audioSpeler”)[0];
var audio=audioSpeler.getElementsByTagName(“audio”)[0];
var startKnop=audioSpeler.getElementsByTagName(“p”)[0];

function afspelen()
{
     if(audio.paused==true)
     {
          audio.play();
          startKnop.innerHTML=”pauze”;
     }
     else
     {
          audio.pause();
          startKnop.innerHTML=”start”;
     }
}
</script>

Naast het starten en stoppen van het afspelen kunnen we ook het volume aanpassen. Eerst plaatsen we een extra p-tag met de tekst ‘vol +’. Als deze p-tag aangeklikt wordt wordt de functie ‘volume()’ uitgevoerd.

<div class=”audioSpeler”>
     <div class=”knoppen”>
          <p onclick=”afspelen()”>start</p>
          <p onclick=”volume()”>vol +</p>
     </div>
     <audio>
          <source src=”sound.mp3″ type=”audio/mp3″/>
          <source src=”sound.wav” type=”audio/wav”/>
     </audio>
</div>

Als op de knop ‘vol +’ gekikt wordt, wordt de functie ‘volume()’ uitgevoerd. Die functie kijkt naar de waarde van volume en telt daar 0.1 bij op (+=0.1).

function volume()
{
     audio.volume+=0.1;
}

We maken een extra knop met de tekst ‘vol -‘ om het volume ook lager te kunnen maken. Deze knop voert dezelfde functie ‘volume()’ uit. Die gaan we zometeen aanpassen zodat dezelfde functie het volume hoger of lager kan zetten.

<div class=”audioSpeler”>
     <div class=”knoppen”>
          <p onclick=”afspelen()”>start</p>
          <p onclick=”volume()”>vol +</p>
          <p onclick=”volume()”>vol -</p>
     </div>
     <audio>
          <source src=”sound.mp3″ type=”audio/mp3″/>
          <source src=”sound.wav” type=”audio/wav”/>
     </audio>
</div>

De ronde haken achter een functie kunnen we gebruiken om informatie door te geven die gebruikt moet worden als de functie uitgevoerd wordt. Als de functie ‘volume()’ wordt uitgevoerd kunnen we aangeven of het geluid harder of zachter moet.

<div class=”audioSpeler”>
     <div class=”knoppen”>
          <p onclick=”afspelen()”>start</p>
          <p onclick=”volume(‘harder’)”>vol +</p>
          <p onclick=”volume(‘zachter’)”>vol -</p>
     </div>
     <audio>
          <source src=”sound.mp3″ type=”audio/mp3″/>
          <source src=”sound.wav” type=”audio/wav”/>
     </audio>
</div>

De gegevens (parameters) die tussen de ronde haken doorgegeven worden aan de functie kunnen we binnen het uitvoeren van de functie gebruiken. Eerst wordt er binnen de functie een variabel gemaakt (die alleen binnen de functie herkend wordt).

<script type=”text/javascript”>
var audioSpeler=document.getElementsByClassName(“audioSpeler”)[0];
var audio=audioSpeler.getElementsByTagName(“audio”)[0];
var startKnop=audioSpeler.getElementsByTagName(“p”)[0];

function afspelen()
{
     if(audio.paused==true)
     {
          audio.play();
          startKnop.innerHTML=”pauze”;
     }
     else
     {
          audio.pause();
          startKnop.innerHTML=”start”;
     }
}

function volume(waarde)
{
     audio.volume+=0.1;
}
</script>

Vervolgens kunnen we de waarde die naar de functie gestuurd wordt gebruiken. Als de waarde ‘harder’ doorgegeven wordt, moet het volume hoger, als de waarde ‘zachter’ doorgegeven wordt, maken we het volume lager.

function volume(waarde)
{
     if(waarde==”harder”)
     {
          audio.volume+=0.1;
     }
     else if(waarde==”zachter”)
     {
          audio.volume-=0.1;
     }
}

Na een aantal keer klikken is het waar te nemen dat het geluid harder en zachter gaat. Toch is het gebruiksvriendelijker om ook visueel te laten weten dat het volume aangepast wordt. Eerst maken we een extra p-tag om de waarde van het volume in weer te geven.

<body>
     <div class=”audioSpeler”>
          <div class=”knoppen”>
               <p onclick=”afspelen()”>start</p>
               <p onclick=”volume(‘harder’)”>vol +</p>
               <p onclick=”volume(‘zachter’)”>vol -</p>
               <p>vol:1</p>
          </div>
          <audio>
               <source src=”almeria/04 Moveonday.mp3″ type=”audio/mp3″/>
               <source src=”almeria/04 Moveonday.wav” type=”audio/wav”/>
          </audio>
</div>

Als laatste stap maken we een variabel met de naam ‘volumeWaarde’ waarin we Javascript vertellen waar de juiste p-tag gevonden kan worden. Als het volume aangepast wordt door de functie ‘volume()’ wordt in de p-tag ‘volumeWaarde’ de tekst aangepast.

<script type=”text/javascript”>
var audioSpeler=document.getElementsByClassName(“audioSpeler”)[0];
var audio=audioSpeler.getElementsByTagName(“audio”)[0];
var startKnop=audioSpeler.getElementsByTagName(“p”)[0];
var volumeWaarde=audioSpeler.getElementsByTagName(“p”)[3];

function afspelen()
{
     if(audio.paused==true)
     {
          audio.play();
          startKnop.innerHTML=”pauze”;
     }
     else
     {
          audio.pause();
          startKnop.innerHTML=”start”;
     }
}

function volume(waarde)
{
     if(waarde==”harder”)
     {
          audio.volume+=0.1;
     }
     else if(waarde==”zachter”)
     {
          audio.volume-=0.1;
     }
     volumeWaarde.innerHTML=audio.volume;
}
</script>

De volumeWaarde heeft nog een schoonheidsfoutje. Hoewel we de waarde van het volume met ‘0.1’ veranderen, maakt Javascript van de aangepaste waarde een getal met flink aantal cijfers achter de komma. De Javascript functie ‘toFixed()’ kan dat getal afronden. Tussen de ronde haken geven we aan dat het getal afgerond moet worden op 1 cijfer achter de komma.

function volume(waarde)
{
     if(waarde==”harder”)
     {
          audio.volume+=0.1;
     }
     else if(waarde==”zachter”)
     {
          audio.volume-=0.1;
     }
     volumeWaarde.innerHTML=audio.volume.toFixed(1);
}