Odtwarzanie muzyki na stronie www - tutorial

Dla specjalistów Webmastering
#1

Witam,

 

Mam na oku stronę: http://www.noisli.com

#2

Tu wystarczy zwykły audioelement + jquery.

 

Przykład ze stacka o który oparty jest wyżej wymieniona strona.  

<div class="play">Play</div>
<div class="pause">Stop</div>

<script>
    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'audio.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load()
        $.get();
        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);
        $('.play').click(function() {
            audioElement.play();
        });
        $('.pause').click(function() {
            audioElement.pause();
        });
    });
</script>

Zmiana głośności to po prostu: 

setVolume = function(id,vol) {
    sounds[id].volume = vol; // vol between 0 and 1
}

Wystarczy że dodasz jakiś bar z przedziału 0-1 a potem będziesz zczytywać jego wartość poprzez $(‘element’).val() i podstawiał ją do funkcji i tyle. 

Źródło: http://stackoverflow.com/questions/8489710/play-an-audio-file-using-jquery-when-a-button-is-clicked