Js简单实现音乐播放器

这段时间正好是寒假，闲来无事把大二学的web再温习了一遍，在学习到Js时，想找一些小玩意来练练手，于是我就用原生Js做了一个简单音乐播放器。

音乐播放器功能如下：

1. 支持上、下一首歌切换
2. 开始、暂停
3. 音量调整
4. 音乐图片的旋转

实现效果

HTML部分

html部分实现了简单的页面布局，作为音乐播放器的按键我选择了从fontawesome图库中导入，也就是我们看到的i标签（下载地址：http://www.fontawesome.com.cn/）
代码片.

<div id="Music">
        <div id="Music-text">
            <span>Music Player</span>
        </div>
        <div id="Music-player">
            <div class="Mucis-Program">
                <img src="music.png" id="Mpicture">
                <audio id="play1">
                    <source src="./music/古巨基%20-%20谁愿放手.mp3">
                </audio>
                <audio id="play2">
                    <source src="./music/徐一%20-%20醒不来的梦.mp3">
                </audio>
                <audio id="play3">
                    <source src="./music/翁梓铭%20-%20苦尽甘来.mp3">
                </audio>
                <i class="fa fa-pause fa-2x" aria-hidden="true" id="stop" onclick="zantin()"></i>
                <i class="fa fa-play fa-2x" aria-hidden="true" id="start" onclick="st()"></i>
                <i class="fa fa-chevron-left fa-2x" aria-hidden="true" id="preMu" onclick="reduce()"></i>
                <i class="fa fa-chevron-right fa-2x" aria-hidden="true" id="nextMu" onclick="add()"></i>
                <i class="fa fa-volume-down fa-2x" aria-hidden="true" id="voiceMu"></i>
                <input type="range" min="0" max="1" step="0.01" id="voice" onclick="myVolume()">	\\音量大小	
            </div>
    </div>

使用font-awesome包时一定要记得引入！！！！

CSS部分

这层叠样式表，就不需要过多解释了

*{
        margin: 0px;
        padding: 0px;
    }
    #Music{
        height: 980px;
        background-image: linear-gradient(#e66465, #9198e5);	//渐变色
    }
    #Music-text{
        width: 200px;
        height: 100px;
        float: left;
        margin-top: 220px;
        margin-left: 46%;
    }
    #Music-text span{
        font-size: 22px;
        font-weight: bold;
        font-family: Garamond;
    }
    #Music #Music-player .Mucis-Program{
        width: 460px;
        height: 280px;
        margin-left: 38%;
        margin-top: 10px;
        background: rgba(255,255,255,0.4);
        float: left;
        border-radius: 25px;
    }
    #Music-player .Mucis-Program img{
        width: 80px;
        height: 80px;
        margin-top: 40px;
        margin-left: 190px;
    }
    #Music-player .Mucis-Program #stop{
        margin-top: 50px;
        margin-left: 218px;
        display: none;
        overflow: auto;
    }
    #Music-player .Mucis-Program #start{
        margin-top: 50px;
        margin-left: 218px;
        display: block;
        overflow: auto;
    }
    #Music-player .Mucis-Program #preMu{
        margin-top: -30px;
        margin-left: 60px;
        float: left;
    }
    #Music-player .Mucis-Program #nextMu{
        margin-left: 278px;
        margin-top: -30px;
        float: left;
    }
    #Music-player .Mucis-Program #voiceMu{
        margin-left: 218px;
        margin-top: 30px;
        float: left;
    }
    #voice{
        margin-left: 246px;
        margin-top: -24px;
        float: left;
    }
    i{
        cursor: pointer;
    }

js代码部分

变量声明 | 将三首歌装入数组中

 var py1 = document.getElementById("play1");	\\歌曲1
    var py2 = document.getElementById("play2");		\\歌曲2
    var py3 = document.getElementById("play3");		\\歌曲3
    var music_arr = [py1,py2,py3];
    var index = 0;		\\数组下标

开始播放 | 在触发这个函数之后，开始按钮隐藏，暂停按钮出现，并播放歌曲，图片开始旋转

function st() {     //开始
        document.getElementById("start").style.display = "none";
        document.getElementById("stop").style.display = "block"
        music_arr[index].play();
        rotate();
    }

暂停播放 | 与开始播放函数同理，并暂停图片的旋转

 function zantin() {     //暂停
        document.getElementById("stop").style.display = "none";
        document.getElementById("start").style.display = "block";
        music_arr[index].pause();
        imagePause();
    }

声音调节 | 触发事件后使得声音随着进度条大小变化

function myVolume() {   //调节声音
        music_arr[index].volume = document.getElementById("voice").value;
    }

切歌 | 在编写程序时我们要先明白，无论切上一首歌还是下一首歌时我们需要先暂停歌曲，再进行对歌曲的操作（index++/index–），判断index是否高于上限或低于下限，最后再开始下标为index的歌曲

function reduce() { //上一首歌
        zantin();
        index--;
        if(index == -1){
            index = music_arr.length-1;
        }
        st();
    }

function add() {    //下一首歌
        zantin();
        index++;
        if(index>music_arr.length-1){
            index=0;
        }
        st();
    }

下面是图片转动的函数，当音乐播放的时候调用rotate（）函数，就可以实现图片的旋转；

同样清除定时器的函数，当音乐暂停的时候调用imagePause()，图片旋转的定时器被清除掉。

function rotate(){      //图片旋转
        var deg = 0;
        timer = setInterval(function () {
            document.getElementById("Mpicture").style.transform="rotate("+deg+"deg)";
            deg+=5;
            if(deg>360){
                deg=0;
            }
        },30);
    }
    function imagePause() {
        clearInterval(timer);
    }

以上就是对实现简单音乐播放器的所有内容，如若有不足之处望大家指出。