从零开始实现网易云音乐播放器

分类: KMPlayer资讯 发布时间:2018-08-15 21:04

H5增加了很多的标签,面试的时候,如果面试官问你H5都有哪些新标签,你回答header、footer、nav。

这么回答几乎是无效的,因为这些标签在H5里面的角色,相当于鸡骨头、鱼刺、蘑菇腿——全是鸡肋,至少你得答出来audio、video、canvas,这些才是H5的核心功能,本文我们就重点说一下audio。

audio广泛的应用于各种项目中,游戏背景、各种播放器,可以说有声音的地方就有audio,当然因为各种限制和坑,很容易让前端人员陷入尴尬,比如在iphone下audio 是不允许autoplay的,如果前端人员不知道这个坑,产品经理又拿微信做对比,那这个锅前端就背定了。

所以本文通过对audio的核心知识的讲解,让用户一来不背锅,二来不加班。

第一步非常简单你就把audio当成图片使用,搞出个src,剩下ul是歌曲列表,然后是一堆功能按钮,不再赘述。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <title>网易云音乐</title></head><body>    <audio src="mp3/千千阙歌.mp3" id="audio" controls></audio>    <h3>点击开始播放</h3>    <ul>        <li>            <a href="javascript:;">千千阙歌</a>        </li>        <li>            <a href="javascript:;">时间都去哪儿了</a>        </li>        <li>            <a href="javascript:;">小苹果</a>        </li>        <li>            <a href="javascript:;">夜的钢琴曲</a>        </li>        <li>            <a href="javascript:;">雨的印记</a>        </li>    </ul>    <div>        <div></div>        <div></div>    </div>    <div>        <input type="button" value="上一曲" id="prev">        <input type="button" value="播放" id="play">        <input type="button" value="下一曲" id="next">        <input type="button" value="单曲循环" id="singleLoop">        <input type="button" value="顺序播放" id="queue">        <input type="button" value="随机播放" id="randomQueue">        <input type="button" value="循环播放" id="menuloop">    </div></body></html>

这样的播放控制条很丑,产品经理会很不满意,当然了,如果产品经理说真好看,那你就换公司吧,我们需要隐藏控制条,然后自己用各种按钮和标签模拟一个。

第一个功能,播放暂停,

//播放        oPlay.onclick = function () {            if (oA.paused) {                this.value = '暂停'                oA.play();            } else {                this.value = '播放'                oA.pause();            }        };

然后整下一曲,

var arrSong = [                '千千阙歌',                '时间都去哪儿了',                '小苹果',                '夜的钢琴曲',                '雨的印记'            ];           //下一曲            function play() {                for (var i = 0; i < aA.length; i++) {                    aA[i].className = '';                }                aA[iNow].className = 'on';                oA.src = 'mp3/' + arrSong[iNow] + '.mp3';                oA.play();            }            //下一曲            oNext.onclick = function () {                iNow++;                if (iNow >= arrSong.length) {                    iNow = 0;                }                oPlay.value = '暂停';                play();            };

这里大家要注意,我使用的是数组的形式,因为数组要比单独处理某一个音乐更方便。下面是单曲循环,

//单曲循环            oSingleLoop.onclick = function () {                oA.loop = !oA.loop;            };

这里涉及到一个坑,很多人会觉得我直接在mp3播放onend事件里面在播放一次原来的音乐不就可以了吗?

确实可以问题是麻烦,因为自身就有了loop属性,但是随机播放或者整个列表重复就没有属性了,这里就要使用switch case判断。

//顺序播放            oQueue.onclick = function () {                oA.playState = 2;            };            //随机播放            oRandomQueue.onclick = function () {                oA.playState = 3;            };            //列表循环            oMenuloop.onclick = function () {                oA.playState = 4;            };            //播放完毕,单曲循环            oA.onended = function () {                switch (oA.playState) {                    case 2:                        iNow++;                        if (iNow < arrSong.length) {                            play();                        }                        break;                    //随机                    case 3:                        iNow = rnd(0, arrSong.length);                        play();                        break;                    //列表循环                       case 4:                        iNow++;                        if (iNow > arrSong.length) iNow = 0;                        play();                        break;                }            };

‍这里算是一个功能实现技巧,通过开关,上面说这些都很简单,我们实现一个看起来复杂其实非常简单的的功能,进度条,其实进度就是当前时间总时间,这里要用一个timeupdate事件,因为播放的过程中时间是不断变化的。

oA.addEventListener('timeupdate', activeProgressBar, false);            function activeProgressBar() {                var percentNum = Math.floor((oA.currentTime / oA.duration) * 10000) / 100 + '%';                progress.style.width = percentNum;                progressBtn.style.left = percentNum;            }

这里,给大家顺便留一个作业,如何实现进度条拖拽改变,播放进度呢?

var percentNum = (e.targetTouches[0].pageX - progressBar.getBoundingClientRect().left) / progressBar.getBoundingClientRect().width;

‍提示大家两个坑,第一个坑是mp3加载,建议使用preloadjs而不是preload属性。

第二给大家一个事件,

audio.addEventListener('loadedmetadata', function() {    console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds.");    audio.play(); });

‍这个事件用在页面加载完,但是mp3如果没有加载到位会出现获取音乐时长NaN问题,用这个就OK了。

最后给大家留一个作业,

实现#/my/m/music/playlist网易云音乐App的上一曲、下一曲、单曲、列表循环、顺序播放,以及播放进度控制CD封面旋转功能。