徐向博 / Imin.

HTML5播放器
作者:Imin 时间:2018-04-08 分类: 前端

思路都在注释里了,想法跟着注释走!

HTML部分:

<div class="main">
    <!--创建audio对象-->
    <audio id="my_music" src="http://www.xuxiangbo.com/music/song.mp3"></audio>
    </div>
    <div class="ctrl">
        <!--音乐时长 数字方式显示-->
        <div class="song_info"><span id="ed_time">00:00</span> / <span id="full_time"></span></div>
        <!--进度条-->
        <div class="time_line"><!--外层div代表音乐总时长-->
            <div class="time_line_ed"><!--加ED的代表已经播放的-->
                <div class="time_line_ed_tit"></div><!--进度条最右侧的小圆点-->
            </div>
        </div>
        <!--控制器 没什么说的-->
        <div class="ctrl_btn">
            <button class="ctrl_button" title="上一曲">上一曲</button>
            <button class="ctrl_button" title="播放" style="font-weight:bolder;font-size:30px">播放/暂停</button>
            <button class="ctrl_button" title="下一曲">下一曲</button>
            <span class="ctrl_vol"><a class="vol_off">音量</a></span>
        </div>
    </div>
</div>

CSS部分没什么难度,主要就是进度条的两个DIV嵌套,代码:

#my_music{
    display: none;
}
.ctrl{
    position: absolute;
    bottom: 100px;
    left: 50%;
    margin-left: -500px;
    width: 1000px;
    height: 100px;
    overflow: hidden;
}
.time_line{
    width: 1000px; /*1000px方便计算进度百分比,数学好的可以随便搞*/
    height: 5px;
    background: #fff;
    border-radius: 20px;
    position: relative;/*父级 .ctrl 用了绝对定位,这边可以用相对定位*/
    top: 10px;
    cursor: pointer;
}
.time_line_ed{
    position: absolute;/*这个定位...为什么是absolute,忘记了,好尴尬....*/
    left: -985px;
    width: 1000px;
    height: 5px;
    border-radius: 20px;
    background: #007979;
    cursor: pointer;
}
.time_line_ed_tit{
    width: 5px;
    height: 5px;
    background: #fff;
    border: 5px solid #007979;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: 0;
}

.ctrl_btn{
    position: absolute;
    top: 60px;
}
.ctrl_btn button{
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 10px;
}
.ctrl_btn button:hover{
    color: #007979;
}
.ctrl_btn button:focus{
    outline: none;
}
.ctrl_vol a{
    font-size: 22px;
    color: #007979;
    margin-left: 20px;
    cursor: pointer;
}
.ctrl_vol span{
    display: inline-block;
    width: 10px;
    height: 8px;
    background: #fff;
    cursor: pointer;
    position: relative;
    bottom: 3px;
}
JS部分:
window.onload = function (){
    //获取音乐对象
    var my_music = document.getElementById('my_music');

    //获取音乐时间,要给一个canplay事件,否则会网络不好的时候会返回NAN
    my_music.addEventListener("canplay",function(){
        //设置初始音量
        my_music.volume = 0.5;

        //格式化音乐时长 duration
        var time_min = parseInt(my_music.duration/60);
        if (time_min<10) {
            time_min = "0" + time_min; //小于十的数字前面加0
        };
        var time_sen = parseInt(my_music.duration%60);
        if (time_sen<10) {
            time_sen = "0" + time_sen;
        };
        var time = time_min + ":" + time_sen;
        document.getElementById('full_time').innerHTML = time;//输出音乐时间

    }) 
    //已播放时长
    function show_timed(){
        //格式化已播放的时间  currentTime
        var timed_min = parseInt(my_music.currentTime/60);
        if (timed_min<10) {
            timed_min = "0" + timed_min;
        }; 
        var timed_sen = parseInt(my_music.currentTime%60);
        if (timed_sen<10) {
            timed_sen = "0" + timed_sen;
        };
        var timed = timed_min + ":" + timed_sen;
        document.getElementById('ed_time').innerHTML = timed;//输出已播放的时间
    }
    setInterval(show_timed,100);

    //进度条
    var time_line_ed = document.getElementsByClassName('time_line_ed')[0];
    function move(){
        //计算已播放的百分比 乘1000(CSS里面设置的time_line的宽度,减去小圆点的15,所以是985)
        var jindu = my_music.currentTime/my_music.duration*985 - 985;
        time_line_ed.style.left = jindu + "px";//请忽略这个高端大气上档次的变量名...
    }
    setInterval(move,100);//让进度条动起来

    //进度条点击事件
    var time_line = document.getElementsByClassName('time_line')[0];
    time_line.addEventListener("click",function(){
        var e = event || window.event;
        var pos = time_line.getBoundingClientRect();
        var dutime = e.clientX - pos.left;//获取点击位置
        var ddd = dutime/985*my_music.duration;
        my_music.currentTime = ddd;//根据百分比让 进度条 和 已播放时间 同步
    })

    //控制器 播放/暂停
    var crtl_button = document.getElementsByClassName('ctrl_button');
    crtl_button[1].addEventListener("click",function(){
        //判断当前状态,paused 执行函数 播放(play()) or 暂停(pause()) ,
        if (my_music.paused){
            my_music.play();
            this.style.color = "#007979";
            this.setAttribute('title','暂停');
        }else{
            my_music.pause();
            this.style.color = "#ffffff";
            this.setAttribute('title','播放');
        }
    })

    //当前播放完毕事件 暂停、恢复按钮状态
    my_music.addEventListener("ended",function(){
        my_music.pause(); 
        crtl_button[1].style.color = "#ffffff";
        crtl_button[1].setAttribute('title','播放');
    })

    //音量控制
    var vol_num = 0;
    var vol = document.getElementsByClassName('ctrl_vol')[0];
    for (var i = 0; i < 10; i++) { //输出音量色块 每一个色块代表 10%的音量
        var append_span = document.createElement("span");
        vol.appendChild(append_span);
    }
    var vol_btn = vol.getElementsByTagName("span");
    for (var i = 0; i < vol_btn.length; i++) {
        if (i < 5) {
            vol_btn[i].style.background = "#007979"; //默认50%音量,所以输出5个带颜色的
        }
    }
    for (var i = 0; i < vol_btn.length; i++) {
        vol_btn[i].index = i + 1;
        vol_btn[i].addEventListener("click",function(){//判断点击色块的 索引
            my_music.volume = this.index/10;
            for (var x = 0; x < vol_btn.length; x++) {
                if (x < this.index) {
                    vol_btn[x].style.background = "#007979";
                }else{
                    vol_btn[x].style.background = "#fff";
                }
            }
            vol_num = this.index;
        })
    };
    var vol_off = document.getElementsByClassName('vol_off')[0];
    vol_off.addEventListener("click",function(){
        if (my_music.volume) {
            my_music.volume = 0;
            this.innerHTML = "静音";
            for (var i = 0; i < vol_btn.length; i++) {
                vol_btn[i].style.background = "#fff";
            }
        }else{
            if (vol_num) {
                my_music.volume = vol_num/10;
                this.innerHTML = "音量";
                for (var i = 0; i < vol_num; i++) {
                        vol_btn[i].style.background = "#007979";
                }
            }else{
                my_music.volume = "0.5";
                this.innerHTML = "";
                for (var i = 0; i < 5; i++) {
                        vol_btn[i].style.background = "#007979";
                }
            }
        }
    })
}

原生js撸的不多,工作一直都用jq来着,最近打算把扔掉的原生重新捡起来,所以代码写的比较懒散,大牛们有兴趣给优化一下的,欢迎联系我。代码仅供参考,请勿直接复制使用,以免出现不必要的意外。


Imin@云南茶网 欢迎交流 2018-09-29 18:10
云南茶网不错,改天好好研究下 2018-09-29 17:56
炸鸡店加盟感谢分享 收藏了 2018-06-19 10:58