音乐播放器

网址
http://www.webmxx.com/Blog/try1/song.html

主要知识点
1 audio video 音频视频播放
audio 音频播放
本例子主要用到了两个属性 autoplay 自动播放 loop 循环播放

            //mps播放器
            var audioDom = document.createElement("audio");
                //播放音乐
                audioDom.src="js/could.mp3";
                //设置自动播放
                audioDom.autoplay="autoplay";
                //设置循环播放
                audioDom.loop="loop";           

2 lrc歌词格式

[01:25.51] 琴弦断了 缘已尽了 你也走了
[01:30.30] 你是过客 温柔到这 沉默了
[01:35.25] 拱桥斜坡 水岸码头 谁记得
[01:40.11] 渡江扁舟 我伤依旧 临行回头 远方谁挥手
[01:50.78] 古刹山岚绕 雾散后 北风高
[01:55.47] 禅定我寂寥 我身后 风呼啸
[02:00.26] 笛声半山腰 而你在 哪座桥
[02:04.86] 远远对他 在微笑

这样标明歌词播放时间和对应歌词的，就是lrc歌词

3 split 字符串截取函数
4 timeupdate 播放进度

5 注意这个部分

歌词文本经第一次分离，其LrcArr 就是一个数组了，所以不可以使用
LrcArr .split(“]”) ;

已经犯了两次错了在这里，呜呜

参考资料
http://www.cnblogs.com/jaxu/archive/2013/06/26/3155915.html

currenttime 当前播放秒数
http://www.runoob.com/jsref/prop-video-currenttime.html

5 本例子的思路是，给每一个含有歌词的元素添加唯一ID ，id值为 对应的时间。。然后通过监听 歌曲播放分currenttime 来为对应的添加 active 。
6 在练习的时候发现
这个部分

if (mess) {
                        html += "<div class='tz_time' id='"+s+"'>"+mess+"</div>"
                    }
                    //歌词放入div 中
                    $(".m_con").html(html);

                    //音乐播放时候，调用函数timeupdate 时间发生变化会调用
                    audioDom.addEventListener("timeupdate",function () {
                        //知道当前播放时间
                        var timer = this.currentTime;
                        // 通过时间来驱动歌词
                        var ss = parseInt(timer);
                        for (var i=0;i<ss;i++) {
                            $("#"+i).addClass("sel").siblings().removeClass("sel");
                        }

可以变化为

if (mess) {
    html = $("<div></div>").text(mess).addClass("a"+s);
    html.appendTo(".m_con")  //歌词放入div 中
                    }
                    //音乐播放时候，调用函数timeupdate 时间发生变化会调用
                    audioDom.addEventListener("timeupdate",function () {
                        //知道当前播放时间
                        var timer = this.currentTime;
                        // 通过时间来驱动歌词
                        var ss = parseInt(timer);
                        $(".a"+ss).addClass("sel").siblings().removeClass("sel");

                    })

8 最近的一次练习中，将代码简化为一下

<script> $(function () { //建立一个音乐播放器 设置自动循环播放音乐 天涯过客 var radioPlay = $("<audio></audio>").attr({autoplay:"autoplay", src:"js/could.mp3" , loop:"loop" }); //歌词 the lyrics var lyrics = $("#lrc").val(); var getLy = lyrics.split("["); //分割歌词 "ar:周杰伦] ↵", "t_time:(04:13)] ↵", "00:00.00] 周杰伦 - 天涯过客↵"  //注意，此时的getLy是一个数组 所以不可以使用 getLy.split("]") for(var i=0,getLength=getLy.length ;i<getLength;i++){ var getL = getLy[i].split("]"); // ["00:09.73", " 词：方文山 曲：周杰伦↵"] //将时间和对应词  var getTime = getL[0]; var getNext = getL[1]; // 歌词 var nowTi = getTime.split("."); var nowL = nowTi[0].split(":"); var nowTime = nowL[0]*60 +nowL[1]*1; // 需要进行*1 操作 得到时间点 $("<div></div>").text(getNext).addClass("show"+nowTime).appendTo(".m_con"); //判断音频播放时间点 radioPlay.on("timeupdate",function () { var now = parseInt( this.currentTime ) ; $(".show"+now).addClass("sel").siblings().removeClass("sel"); }) } }) </script>

9 利用代码，编写了一个音乐播放器

网址 http://www.webmxx.com/Blog/try1/player.html

注意，这里有添加播放开始 暂停按钮。

使用到音频播放和暂停方法 pause play

开始是这么写的
$("audio").pause();
但是并没有起作用。查阅资料之后，将其更改为

$("audio")[0].pause();

就可以了。

最爱的帅哥出来表示此刻欣喜的心情。

原来是将 jq对象转化为了DOM对象，只有DOM对象才能操作pause 和play 方法。

之后制作了一个歌曲列表播放的播放器，可以进行左右切换歌曲播放

网址：

http://www.webmxx.com/Blog/try1/musicPlayer.html