переключите источник звука с помощью jquery и HTML5 audio tag - PullRequest
Новая
       1

переключите источник звука с помощью jquery и HTML5 audio tag

23 голосов
/ 24 февраля 2012

Я нашел только одно решение, но оно было неполным, поэтому мне нужна помощь здесь.

У меня настроен звук: 

<audio id="player" controls="controls">
          <source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" />
          <source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" />
          Your browser does not support the audio element.
    </audio>

У меня есть динамически сгенерированная таблица ссылок для изменения дорожки: 

<div id="audio_list">
   <a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a>
</div>

У меня есть этот jquery, который яПонятия не имею, что делать, чтобы сменить дорожку 

$('.track').click(function(){

    load_track = $(this).attr('data-location');//gets me the url of the new track

    change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred...

});

Я нашел эту функцию, но не правильно ее использую 

 function change_track(sourceUrl) {

        audio.empty();
        $("#ogg_src").attr("src", sourceUrl).appendTo(audio);
        /****************/
        audio[0].pause();
        audio[0].load();//suspends and restores all audio element
        /****************/
    }

audio = $("<audio>").attr("id", "player")
                        .attr("preload", "auto");

Ответы [ 2 ]

72 голосов
/ 01 марта 2012

Ваша функция изменения должна быть такой: 

function change(sourceUrl) {
    var audio = $("#player");      
    $("#ogg_src").attr("src", sourceUrl);
    /****************/
    audio[0].pause();
    audio[0].load();//suspends and restores all audio element

    //audio[0].play(); changed based on Sprachprofi's comment below
    audio[0].oncanplaythrough = audio[0].play();
    /****************/
}

Проблемы были в audio.empty () и в var звука. Вы пытались добавить пустую звуковую метку и не записали звуковую метку обратно в браузер.

5 голосов
/ 05 марта 2012

Возможно, вы также захотите переименовать функцию, так как «изменение» уже является функцией во вселенной jQuery.

...