音乐播放器

本文介绍了一种实现音乐播放器及其与歌词同步显示的方法,包括音频播放控制、歌词解析及时间同步技术。通过JavaScript实现了自动播放、循环播放功能,并通过分析歌词文件(LRC)实现歌词按播放时间自动滚动。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值