Воспроизведение нового аудио источника изменено с помощью jquery - PullRequest
Новая
       36

Воспроизведение нового аудио источника изменено с помощью jquery

1 голос
/ 07 марта 2012

все

Я написал простой музыкальный проигрыватель, но у меня есть одна проблема. Я использовал ajax для получения нового источника из файла php, и это работает нормально, но я понятия не имею, как воспроизвести новую песню. Простой audio.play () не работает. Я пытаюсь восстановить Это мой код: 

    function timer(){
    timeleft = $("span#timeleft");
    slider = $("div#slider");
    $(audio).bind('timeupdate', function(){
        var rem = parseInt(audio.duration - audio.currentTime, 10),
        pos = (audio.currentTime / audio.duration) * 315,
        mins = Math.floor(rem/60, 10),
        secs = rem - mins*60;

        timeleft.text('- ' + mins + ':' + (secs > 9 ? secs : '0' + secs));
        slider.css({width: pos + 'px'});
    });
}

$(document).ready(function(){
    audio = $("audio#audio-player-header").get(0);

    $("div#controls").click(function(){
        $(this).toggleClass("pause");
        if(audio.paused){
            audio.play();
            timer();
        }else{
            audio.pause();
        }
    });

    audio.addEventListener("ended", function(){
            $.post("php/player.php", function(result){
                audio.src = result;
            });
            audio.play(); // here is the problem
            timer();
    });
});

И HTML: 

<div id="player">
                    <div id="controls" class="play"></div>
                    <div id="music-title">
                        <div id="slider">
                            <div id="wrap-music-title">
                                <p id="music-title">Jamie T - Chaka Demus</p>
                            </div>
                        </div>
                    </div>
                    <span id="timeleft"></span>
                    <div id="player-header">
                    <audio id="audio-player-header" src="music/rock/Jamie T - Chaka Demus.mp3">
                    </audio>
                    </div>
                </div>

Я нашел в stackoverflow и в Интернете некоторые решения, но здесь ничего не работает. Заранее спасибо за любую помощь.

1 Ответ

0 голосов
/ 07 марта 2012

Вы создали состояние гонки, при котором вы звоните audio.play() до того, как ваш вызов ajax вернется.Вы можете (A) прослушать событие аудио canplay, а затем запустить воспроизведение, или (B) просто установить атрибут autoplay вашего аудиотега.

Опция A: 

audio.addEventListener("ended", function(){
    $.post("php/player.php", function(result){
        audio.src = result;
    });
});

audio.addEventListener("canplay", function(){
    audio.play();
});

Вариант Б: 

<audio autoplay id="audio-player-header" src="music/rock/Jamie T - Chaka Demus.mp3">
...