网址
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 方法。
之后制作了一个歌曲列表播放的播放器,可以进行左右切换歌曲播放
网址: