音乐播放器

网址
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>

补充8.1：
其实如果不需要暂停操作，可以这么写，将audio标签放到网页中去

html部分

<audio src="could.mp3" autoplay="autoplay"></audio>

js部分

//[00:00.00] 周杰伦 - 天涯过客            var words = $("textarea").text();            var line = words.split("[");            //console.log(line); //00:00.00] 周杰伦 - 天涯过客            for (var i=0;i<line.length;i++) {                //console.log(line[i]); // 02:38.79] 门前竹瘦 清风折柳 你要走                var that = line[i];                var sepTime = that.split("]")[0]; //02:38.79                var sepSang = that.split("]")[1];       //门前竹瘦 清风折柳 你要走                     var Time0 = sepTime.split(":")[0]; //  02                var Time1 = sepTime.split(":")[1];  //37.34                         var Time = Time0*60 + parseInt(Time1)   ;// 取到歌词播放时间                $("<p></p>").addClass("now"+Time).text(sepSang).appendTo($(".sang"));                //console.log( $("now"+Time).text() );            }               $("audio").on("timeupdate",function  () {                    var moveTime = parseInt(this.currentTime);                    $(".now"+moveTime).addClass("red").siblings().removeClass("red");                })

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