Az IE9-ben most debütáló HTML5-ben külön tag van hangfájlok lejátszására. Lehetőségünk van egy-vagy több hangfájl megadására, vezérlőgombok (jelenleg play, pause, idő, hangerő) megjelenítésére. A zenék lejátszása javascriptből is vezérelhető. Lássuk a leggyakoribb forgatókönyveket és megoldásaikat:

Zene automatikus lejátszása

Az oldal betöltődése után a böngésző elkezdi letölteni a zenét (esetünkben music.mp3), a lejátszás automatikusan elindul, semmilyen kezelőszerv nem látszik.

    <audio id="player" autoplay src='music.mp3'>
        A böngésződ nem támogatja az audio taget.
        Fallback tartalom, lehet pl. silverlight is.
    </audio>

Zenelejátszó megjelenítése és zene lejátszása

    <audio id="player" controls autoplay src='music.mp3'>
        A böngésződ nem támogatja az audio taget.
        Fallback tartalom, lehet pl. silverlight is.
    </audio>

IE9-ben az alábbi zenelejátszó jelenik meg:

Az, hogy a lejátszás automatikusan indul-e, attól függ, hogy az audio tag tartalmazza-e az autoplay attribútumot.

Meglévő zenelejátszó vezérlése javascriptből

Ha a player azonosítójú lejátszót javascriptből szeretnénk vezérelni az alábbi lehetőségeink vannak:

Zenefájl beállítása

<a href="#" onclick="document.getElementById('player').src='rammstein.mp3'">rammstein</a>

Hangerő beállítása

A hangerő egy 0 és 1 közötti érték, ahol 1 a maximális, 0 pedig a minimális hangerőt jelenti.

<a href="#" onclick="document.getElementById('player').volume=0.5">hangerő 50%</a>

Lejátszás indítása

<a href="#" onclick="document.getElementById('player').play()">play</a>

Lejátszás megállítása

<a href="#" onclick="document.getElementById('player').pause()">pause</a>

Pozicionálás a hangfájlban

<a href="#" onclick="document.getElementById('player').currentTime=0">vissza az elejére</a>

A STOP funkció elkészítése

Az audio-n nincs értelmezve stop függvény, de ezt megírhatjuk magunk a pause() és a currentTime segítségével:

function stop( player ) {
    player.pause();
    player.currentTime = 0;
}    

<a href="#" onclick="stop( document.getElementById('player') )">play</a> 

Zenelejátszás javascriptből meglévő audio tag nélkül

Lehetőség van zenét lejátszani javascriptből akkor is, ha nem tettünk audio taget az oldalra. Ekkor először példányosítani kell egyet kódból, majd használni. Példaként álljon itt egy saját függvény zene háttérben történő lejátszásához:

function play( musicFilePath ) {
    var player = document.createElement('audio');
    player.src = musicFilePath;
    player.volume = 1;
    player.play();
}