一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

自己动手制作一个小小的音乐播放器。可以实现音乐的播放，暂停，切换上一首，下一首音乐，调大调小音量等功能。一起动手看看吧！

一：需求分析

1. 播放器展示当前播放的音乐的音乐名称，歌手，播放进度，左右切换前一首后一首，调节音量，播放暂停等来组成。
2. 自己准备几首音乐的mp3（背景图可选）。
3. 根据我们要实现的效果来绘制播放器的前端代码。

<audio src=""></audio>
<main>
    <!--第一部分 歌曲信息-->
    <header>
        <h1>歌名</h1>
        <h2>歌手</h2>
    </header>
    <!--第二部分 进度条标签，显示进度-->
    <progress></progress>
    <!--第三部分 歌曲的播放进度-->
    <footer>
        <!--当前播放的时间-->
        <time>1.11</time>
        <section>
            <span class="fa fa-backward" onclick="prev();"></span>
            <!--上一曲-->
            <span class="fa fa-pause" onclick="playPause();"></span>
            <!--暂停或播放-->
            <span class="fa fa-forward"  onclick="next();"></span>
            <!--下一曲-->
        </section>
        <section>
             <span class="fa fa-volume-down" onclick="volumeDown();"></span>
             <!--降低音量-->
             <progress value="0.5"></progress>
             <span class="fa fa-volume-up" onclick="volumeUp();"></span>
             <!--增加音量-->
        </section>
    </footer>
</main>

4. 需要用到的几个事件

• 播放的代码

// 播放
var player = document.getElementsByTagName("audio")[0];
function plays(items) {
    player.src = items.src;
    h1.innerHTML = items.name;
    h2.innerHTML = items.singer;
    main.style.backgroundImage = "url(" + items.pic + ")";
    main.className = "slide";
    player.play();
}

• 播放的进度

// 更新播放进度
var progress = document.getElementsByTagName("progress")[0];
function updateTime() {
    progress.value = player.currentTime / player.duration;
    // currentTime:音频播放的当前时间，秒
    // duration：音频播放所需的时间，秒

    var seconds = Math.ceil(player.currentTime) % 60;
    var miutes = Math.floor(player.currentTime / 60);
 
    if (seconds < 10) seconds = "0" + seconds;
    if (seconds == 0) {
        miutes++;
    }
    times.innerHTML = miutes + ":" + seconds;
}

二：音乐播放器

// 获取标签
var player = document.getElementsByTagName("audio")[0];
var h1 = document.getElementsByTagName("h1")[0];
var h2 = document.getElementsByTagName("h2")[0];
var times = document.getElementsByTagName("time")[0];
var progress = document.getElementsByTagName("progress")[0];
var main = document.getElementsByTagName("main")[0];
var volumes = document.getElementsByTagName("progress")[1];

// 音频列表信息
var playList = [
    {src: "传奇.mp3", name: "传奇", singer: "王菲", pic: "wf.png"},
    {src: "知道不知道.mp3", name: "知道不知道", singer: "刘若英", pic: "lry.jpg"},
    {src: "南山南.mp3", name: "南山南", singer: "谭燕", pic: "wf.png"},
    {src: "默.mp3", name: "默", singer: "那英", pic: "lry.jpg"}
]
var current = 0;

// 播放
function plays(items) {
    player.src = items.src;
    h1.innerHTML = items.name;
    h2.innerHTML = items.singer;
    main.style.backgroundImage = "url(" + items.pic + ")";
    main.className = "slide";
    // 加上动画效果
    setTimeout(function () {
        main.className = "";
    }, 1000);
    player.play();
}

// 开始
function start() {
    if (current >= playList.length) current = 0;
    // 播放的第一首
    if (current < 0) current = playList.length - 1;
    // 播放的是最后一首
    var items = playList[current];
    if (items) {
        plays(items);
    }
}

start();

// 更新进度
function updateTime() {
    progress.value = player.currentTime / player.duration;
    var seconds = Math.ceil(player.currentTime) % 60;
    var miutes = Math.floor(player.currentTime / 60);
    if (seconds < 10) seconds = "0" + seconds;
    if (seconds == 0) {
        miutes++;
    }
    times.innerHTML = miutes + ":" + seconds;
}

player.addEventListener("timeupdate", updateTime);

// 音乐播放或暂停
function playPause() {
    if (player.paused) {
        player.play();
        document.getElementsByClassName("fa-play")[0].className = "fa fa-pause";

    } else {
        player.pause();
        document.getElementsByClassName("fa-pause")[0].className = "fa fa-play";
    }
}

// 上一曲
function prev() {
    current--;
    start();
    document.getElementsByClassName("fa-play")[0].className = "fa fa-pause";
}

// 下一曲
function next() {
    current++;
    start();
    document.getElementsByClassName("fa-play")[0].className = "fa fa-pause";
}

// 音量改变
player.volume = 0.5;

function volumeUpdate() {
    volumes.value = player.volume;
}

// 降低音量
function volumeDown() {
    if (player.volume > 0) player.volume -= 0.1;
}

// 增加音量
function volumeUp() {
    if (player.volume < 1) player.volume += 0.1;
}

player.addEventListener("volumechange", volumeUpdate);
player.addEventListener("ended", next);