原生js制作播放器

以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊)

做这个播放器  也百度了一下, 你叫我做,我肯定做不出来, 就算用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>

歌词Lrc

通过点击图片   使歌曲播放 而歌曲是在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>

html部分

</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:;
            padding:;
        }

        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 做一个简单的播放器