在播放列表项目上播放/暂停音频元素单击

时间:2014-11-22 23:02:57

标签: javascript jquery html5 audio

所以我正在使用这个音频播放器http://jsfiddle.net/lastrose/vkMqR/light/,而我正在试图做的是在点击播放列表中的那个项目时“暂停”一首歌。考虑到我在这个js的东西非常新。谁能帮我?这是代码:

$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('bl-content a');
    len = tracks.length; 0;
    audio[0].volume = .75;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}

})

1 个答案:

答案 0 :(得分:0)

当用户点击播放列表中的.active轨道时,您需要检查曲目是正在播放还是暂停,然后相应地播放或暂停。

类似的东西:

if(audio.paused){
  //Audio is currently paused so play it
  audio.play();
}else{
  //Pause it
  audio.pause();
}

TutsPlus有一篇很好的文章描述了播放控制功能。在此处找到它:http://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081

摘录:

myaudio.play(); - This will play the music.
myaudio.pause(); - This will stop the music.
myaudio.duration; - Returns the length of the music track.
myaudio.currentTime = 0; - This will rewind the audio to the beginning.
myaudio.loop = true; - This will make the audio track loop.
myaudio.muted = true; - This will mute the track

希望有所帮助。