简易播放器实现

做了个简易音乐播放器。

演示代码：http://codepen.io/makaiqian/pen/eybvq

基本功能：

1.播放、暂停

2.上一首、下一首

简单说下它的核心代码：

---

1. 定义

 var $music = $(‘#js-music’)[0];  

定义的时候是$(‘#js-music’)[0]，而不是$(‘#js-music’)的原因:将jQuery对象转为DOM对象，就可以使用各种DOM事件和属性。

2. 暂停、播放

 // 暂停、播放切换  
 $musicStart.on(‘click’, function() {  
    if ($music.paused) {  
        $music.play();  
        $musicStart.removeClass(‘music-pause’);  
    } else {  
        $music.pause();  
        $musicStart.addClass(‘music-pause’);  
    }  
 });

如果音乐停止，就用.paused

让音乐开始：play()

让音乐暂停：pause()

---

3. 上一首、下一首

// 上一首  
$musicPre.on(‘click’, function() {  
    –currentSrcIndex currentSrc = $musicList.eq(currentSrcIndex).prop("src");  
    $music.src = currentSrc;  
    $music.play();  
});  

这里的--currentSrcIndex起到了很大的作用。 还记得与表达式吗？如果左边表达式结果为0，则右边就不执行了。 下一首的原理也差不多：

 // 下一首  
$musicNext.on('click', function() {  
    ++currentSrcIndex > $musicList.length – 1 && (currentSrcIndex = 0);  
    currentSrc = $musicList.eq(currentSrcIndex).prop(“src”);  
    $music.src = currentSrc;  
    $music.play();  
});