html5 js 音乐播放器 html简单音乐播放器

8.15 今天作业写一个音乐播放器，最终效果如下

需要完成功能如下：

1. 默认播放第一首歌，点击播放键即可播放，点击暂停即可暂停
2. 点击列表中任意歌曲即切换播放该歌曲
3. 实现切换到上一首或下一首的功能
4. 进度条随歌曲前进
5. 歌词实时显示
6. 可以调整音量，设置静音
7. 实现单曲循环和全部循环的功能

一、布局分析

整个页面可以分为三个部分，标题、列表和控制条，因此Html代码如下：

<div class="container">
        <h2>音乐播放器-小河今学</h1>
        <div class="content">
        </div>
        <div class="sing-words">热爱歌词，热爱音乐</div>
        <div class="audio">
        </div>
    </div>

列表部分的歌曲我们通过json文件添加进来，因此这里先空着。接着是控制条的部分，可以看到分为控制条、按钮和其他功能，因此Html代码如下：

<div class="audio">
            <div class="controls">
                <div class="progress">
                    <p></p>
                </div>
                <span class="curtime">00:00</span>
                <span class="alltime">00:01</span>
            </div>
            <audio src="none"></audio>
            <div class="btn">
                <button class="prev"></button>
                <button class="pp play"></button>
                <button class="next"></button>
            </div>
            <div class="cando">
                <div class="vol">
                    <em></em>
                    <a>
                        <span>
                            <i></i>
                        </span>
                    </a>
                    <b>10%</b>
                </div>
                <div class="s-loop">
                    单曲循环
                </div>
                <div class="a-loop">
                    全部循环
                </div>
            </div>
        </div>

二、CSS引入

这个部分按照自己的喜好写即可，按钮部分需要应用到一些position来定位，比较复杂的部分在于音量键，这里需要提前设置一个调节音量的部分。

.cando{
    margin: 15px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}


.cando .vol {
    display: flex;
    align-items: center;
    position: relative;
}

.cando .vol em {
    display: inline-block;
    background-image: url(/img/vol.png);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.cando .vol a {
    display: none;
    position: absolute;
    left: 0;
    top:-100px;
    width: 30px;
    height: 100px;
    background-color: #eee;
}

.cando .vol a span {
    display: block;
    width: 10px;
    height: 90px;
    margin:5px auto;
    border-radius:5px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
}

.cando .vol a span i {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 10px;
    height: 20%;
    background-color: pink;
    border-radius: 4px;
}

最终实现的效果如下：

三、json文件和歌曲列表引入

首先要在页面引入jq和我们自己定义的play.js文件。

<script src="/js/jquery.js"></script>
<script src="/js/play.js"></script>

接着写我们的json文件，或者直接在js里给出数据也可以，这里我选择外部引入

[
    {
        "name": "世界上的另一个我",
        "url": "/audio/阿肆 _ 郭采洁 - 世界上的另一个我 (V0).mp3",
        "lrc": "/lrc/阿肆 _ 郭采洁 - 世界上的另一个我.lrc"
    },
    {
        "name": "under the ground",
        "url": "/audio/nafla (나플라) _ DEAN (딘) - under the ground (Explicit) (V0).mp3",
        "lrc": "/lrc/nafla (나플라) _ DEAN (딘) - under the ground (Explicit).lrc"
    },
    {
        "name": "Better Alone",
        "url": "/audio/Peder Elias - Better Alone.mp3",
        "lrc": "/lrc/Peder Elias - Better Alone.lrc"
    },
    {
        "name": "沙发上的白日梦",
        "url": "/audio/SoulFa灵魂沙发 - 沙发上的白日梦.mp3",
        "lrc": "/lrc/SoulFa灵魂沙发 - 沙发上的白日梦.lrc"
    },
    {
        "name": "SoulMate",
        "url": "/audio/ZICO (지코) _ IU (아이유) - SoulMate (V0).mp3",
        "lrc": "/lrc/ZICO (지코) _ IU (아이유) - SoulMate.lrc"
    }
]

接着回到我们的play.js文件中，先采用IIFE写法，接着用ajax导入json文件，注意发送ajax请求，必须以http的方式启动文件，不能在本地打开。

;(function($){
    // 用ajax异步请求获取json文件
    var xhr = new XMLHttpRequest();
    xhr.open('get','/audio.json',true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log(JSON.parse(xhr.responseText))
        }
    };
    xhr.send();
})(jQuery);

控制台输出一下看看是否拿到文件，将获取到的json文件赋给变量 songs，然后通过循环将歌曲名称渲染到前端页面上。

;(function($){
    // 用ajax异步请求获取json文件
    var xhr = new XMLHttpRequest();
    xhr.open('get','/audio.json',true);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            // console.log(JSON.parse(xhr.responseText))
            // 将获取到的json文件赋给变量 songs
            var songs = JSON.parse(xhr.responseText)
            
            // 通过循环把歌曲名渲染到前端页面上
            $.each(songs,function (idx,song) {
                $('.content ul').append('<li>' + song.name + '</li>');
            })
        }
    };
    xhr.send();
})(jQuery);

实现效果如下：