以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊)
做这个播放器 也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery 我也做不出来. 以前也用过audio控件,但是只不过绑定src 再来个loop
这个播放器就做完了
今天,来一个比较好看的
效果图
<div class="photo"> <div class="title">种种<span style="font-size:10px;">_陈粒</span></div> <div class="play" title="暂停"></div> <div class="lrc"> <div class="words"></div> </div> <audio src=" http://sc1.111ttt.cn/2015/5/10/11/103111444123.mp3" loop="loop" id="myMusic"></audio> <!--音频标签--> </div>
做音乐播放器
使用audio
我做了一个 播放 暂停 图片旋转,还有个歌词,其他都没弄了
说一下这里的重难点
这里图片旋转是用css3的animation 做的
.play.rotate {
-webkit-animation: rot 5s linear infinite;
-moz-animation: rot 5s linear infinite;
-ms-animation: rot 5s linear infinite;
-o-animation: rot 5s linear infinite;
animation: rot 5s linear infinite; /*css3自定义动画*/
}
@keyframes rot {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
找一个lrc歌词
放入到文本域
<textarea id="txt" style="display: none;"> [00:00.79]种种 - 陈粒 [00:01.49]词：张小蜀 曲：陈粒 [00:06.93]你是我梦里 [00:08.53]陌生 熟悉 [00:10.98]与众不同 [00:13.81]你是我梦里 [00:15.34]幻想 现实 [00:17.88]不灭星空 [00:20.57]眼睛 [00:21.59]彩色是你 [00:24.15]黑白是你 [00:28.08]低落 欢欣 [00:31.36]有始不见终 [00:35.08]你是我梦里 [00:36.90]失去 得到 [00:39.26]欲望失宠 [00:42.16]你是我梦里 [00:44.07]迟疑 果断 [00:46.35]思想牢笼 [00:48.88]耳朵 [00:49.73]沉默是你 [00:52.59]呼啸是你 [00:56.62]分裂退化 [00:59.64]脚底悬空 [01:03.51]你是我梦里 [01:05.46]孤寂 热闹 [01:07.74]来去匆匆 [01:10.41]你是我梦里 [01:12.20]虚妄 真实 [01:14.76]午夜霓虹 [01:17.34]胃里 [01:18.19]苍凉是你 [01:21.13]炙热是你 [01:25.45]填满 掏空 [01:27.85]会不会不同 [01:32.24]你是我三十九度的风 [01:35.35]风一样的梦 [01:39.40]汇集 失散 [01:41.94]感受在消融 [01:46.55]梦里你是梦 [01:49.57]越梦越空 [01:54.10]越空 [01:55.60]越爱做 [01:57.98]关于你的梦 [02:02.02] </textarea>
通过点击图片 使歌曲播放 而歌曲是在audio 控件中 所有要来个点击事件 简介的使audio播放
var btn = document.getElementsByClassName("play")[0];//通过class类名去获取元素 数组的形式储存 [] 点击 播放 再点击 暂停
var myMusic = document.getElementById("myMusic");//通过ID 获取audio
var mark = true;//布尔值 true真 false假
btn.onclick = function () {
if (mark)//隐式转换 i > 1
{
this.className += " rotate";
myMusic.play();//播放音乐
myMusic.volume = 0.4; //音量
mark = false;
} else {
this.className = "play";
myMusic.pause();//音乐暂停
mark = true;
}
};
现在 基本上 已经可以播放了
那么我们把歌词 放到 div 为class 的words 当中
所以 要获取 文本域
var txt = document.getElementById("txt");
使用 console 输出
但是我们不是要这种格式的 ,我们只需要时间 所以 要 分割
var lrc = txt.value.split("[");
循环输出 在分割一下
for (var i = 0; i < lrc.length; i++) { var lrcArrly = lrc[i].split("]"); console.log(lrc[i]) //分割时分,秒 // console.log(ms); //console.log(lrcArrly[1]); 歌词 i } };
就是这样
接下来需要放在 words下面
var html = "";
html += "<p id=" + ms + ">" + lrcArrly[1] + "</P>";
words.innerHTML = html;
前面我们看见 时间格式是这样的 
而audio 的 addEventListener 方法 输出的时间是这个
我们要转 时间格式
分割
var time = lrcArrly[0].split("."); //分割时分,秒
var times = time[0].split(":");
// console.log(times[0]) //分割时,分
var ms = times[0] * 60 + times[1] * 1; //分钟转换为秒 × 60 times[1] 是秒数,×1 表示 string转换为int类型
输出一下
正确了但是addEventListener 方法的时间 格式太精确了
我们也要转一下
var currentTimes = parseInt(this.currentTime); //取整
输出对比
现在时间 就转好了
myMusic.addEventListener("timeupdate", function () {
// timeupdate 是时间变换
// 输出时间变换:console.log(this.currentTime); 1.300000
console.log(this.currentTime);
var currentTimes = parseInt(this.currentTime); //取整
console.log(currentTimes);
});
时间 转换 好了 歌词 也放好了
我们 想要鼠标移入歌词,出现时间
html += "<p id=" + ms + " title=[" + lrc[i] + ">" + lrcArrly[1] + "</P>"; // 给他个id 是想偷懒 自动生成 不用 设置其他的了
想要他 唱的时候 歌词 移动
鼠标监听的 事件中添加
这里和图片轮盘的实现方法差不多,一个大的div 包裹一个div 大的div 隐藏溢出的 div 的内容
div 向上移动
//aidio监听播放进度 发生变化,就触发函数 myMusic.addEventListener("timeupdate", function () { // 输出时间变换:console.log(this.currentTime); 1.300000 console.log(this.currentTime); var currentTimes = parseInt(this.currentTime); //取整 console.log(currentTimes); if (document.getElementById(currentTimes)) { // 当前的 该颜色,非当前就改为以前颜色 for (var i = 0; i < Ps.length; i++) { Ps[i].style.color = "gray"; Ps[i].style.fontSize = "10px"; } document.getElementById(currentTimes).style.color = "red"; document.getElementById(currentTimes).style.fontSize = "18px"; if (Ps[num].id == currentTimes) { words.style.top = -15* num + "px"; if (num>=58) { num = 0; } num++; } } });
这个就是使用原生js做的播放器
可以看这里的视频 :http://www.iqiyi.com/w_19ru5adg61.html
下面是源码
<textarea id="txt" style="display: none;"> [00:00.79]种种 - 陈粒 [00:01.49]词：张小蜀 曲：陈粒 [00:06.93]你是我梦里 [00:08.53]陌生 熟悉 [00:10.98]与众不同 [00:13.81]你是我梦里 [00:15.34]幻想 现实 [00:17.88]不灭星空 [00:20.57]眼睛 [00:21.59]彩色是你 [00:24.15]黑白是你 [00:28.08]低落 欢欣 [00:31.36]有始不见终 [00:35.08]你是我梦里 [00:36.90]失去 得到 [00:39.26]欲望失宠 [00:42.16]你是我梦里 [00:44.07]迟疑 果断 [00:46.35]思想牢笼 [00:48.88]耳朵 [00:49.73]沉默是你 [00:52.59]呼啸是你 [00:56.62]分裂退化 [00:59.64]脚底悬空 [01:03.51]你是我梦里 [01:05.46]孤寂 热闹 [01:07.74]来去匆匆 [01:10.41]你是我梦里 [01:12.20]虚妄 真实 [01:14.76]午夜霓虹 [01:17.34]胃里 [01:18.19]苍凉是你 [01:21.13]炙热是你 [01:25.45]填满 掏空 [01:27.85]会不会不同 [01:32.24]你是我三十九度的风 [01:35.35]风一样的梦 [01:39.40]汇集 失散 [01:41.94]感受在消融 [01:46.55]梦里你是梦 [01:49.57]越梦越空 [01:54.10]越空 [01:55.60]越爱做 [01:57.98]关于你的梦 [02:02.02] </textarea> <div class="photo"> <div class="title">种种<span style="font-size:10px;">_陈粒</span></div> <div class="play" title="暂停"></div> <div class="lrc"> <div class="words"></div> </div> <audio src=" http://sc1.111ttt.cn/2015/5/10/11/103111444123.mp3" loop="loop" id="myMusic"></audio> <!--音频标签--> </div>
</body>
<script type="text/javascript">
var num = 0;
var btn = document.getElementsByClassName("play")[0];//通过class类名去获取元素 数组的形式储存 [] 点击 播放 再点击 暂停
var myMusic = document.getElementById("myMusic");//通过ID 获取audio
var words = document.getElementsByClassName("words")[0];
var mark = true;//布尔值 true真 false假
btn.onclick = function () {
if (mark)//隐式转换 i > 1
{
this.className += " rotate";
myMusic.play();//播放音乐
myMusic.volume = 0.4;
mark = false;
} else {
this.className = "play";
myMusic.pause();//音乐暂停
mark = true;
}
};
var txt = document.getElementById("txt");
var lrc = txt.value.split("[");
// console.log(txt.value);
var html = "";
//循环遍历 出歌词
for (var i = 0; i < lrc.length; i++) {
var lrcArrly = lrc[i].split("]");
var time = lrcArrly[0].split(".");
// console.log(lrc[i]) //分割时分,秒
var times = time[0].split(":");
// console.log(times[0]) //分割时,分
var ms = times[0] * 60 + times[1] * 1; //分钟转换为秒 × 60 times[1] 是秒数,×1 表示 string转换为int类型
// console.log(ms);
// console.log(lrcArrly[1]); // 歌词
if (lrcArrly[1]) { //判断是否存在 存在进入
html += "<p id=" + ms + " title=[" + lrc[i] + ">" + lrcArrly[1] + "</P>";
}
words.innerHTML = html;
// console.log(words.innerHTML);
};
//获取所有的p标签
var Ps = document.getElementsByTagName("p");
//aidio监听播放进度 发生变化,就触发函数
myMusic.addEventListener("timeupdate", function () {
// 输出时间变换:console.log(this.currentTime); 1.300000
console.log(this.currentTime);
var currentTimes = parseInt(this.currentTime); //取整
console.log(currentTimes);
if (document.getElementById(currentTimes)) {
// 当前的 该颜色,非当前就改为以前颜色
for (var i = 0; i < Ps.length; i++) {
Ps[i].style.color = "gray";
Ps[i].style.fontSize = "10px";
}
document.getElementById(currentTimes).style.color = "red";
document.getElementById(currentTimes).style.fontSize = "18px";
if (Ps[num].id == currentTimes) {
words.style.top = -15* num + "px";
if (num>=58) {
num = 0;
}
num++;
}
}
});
</script>
<style type="text/css"> * { margin: 0; padding: 0; } body { background: rgb(55, 76,86); } .photo { width: 240px; height: 240px; margin: 100px auto; font-family: "微软雅黑"; padding: 5px; border-radius: 20px; box-shadow: 0 0 7px#fff; overflow: hidden; } .title { width: 240px; height: 30px; /*background:url("images/2.png")no-repeat;*/ font-size: 20px; color: #ccc; font-weight: bold; text-align: center; line-height: 30px; } .play { width: 80px; height: 80px; background: url("http://p1.music.126.net/lN2jt4Vkqw3zzIjc2JjyCw==/2532175280981641.jpg?param=130y130")no-repeat; margin: auto; border-radius: 50% 50%; cursor: pointer; } .lrc { width: 200px; height: 100px; margin: 20px auto; text-align: center; font-size: 10px; overflow: hidden; color: #ccc; } .words { position: relative; left: 0px; } .play.rotate { -webkit-animation: rot 5s linear infinite; -moz-animation: rot 5s linear infinite; -ms-animation: rot 5s linear infinite; -o-animation: rot 5s linear infinite; animation: rot 5s linear infinite; /*css3自定义动画*/ } @keyframes rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style>
这就是 使用原生js 做一个简单的播放器