最近做了一个类似于音乐app里面列表播放的功能，主要是音频播放和按钮状态的联动：

　　界面如下：

　　　　　

html5如何做音乐列表 html做音乐播放列表_java

　　如上图所示

　　　　上面有一个播放按钮

　　　　下面有一个播放列表

　　　　上面还有一个歌曲长度的总时长

　　　　上面一个按钮能控制下面所有歌曲的播放和暂停

　　　　下面的也可以控制相对应的歌曲的播放和暂停

　　　　上面的按钮要做到和下面的按钮状态同步

　　　　头部按钮下面是个swiper写的动画效果，效果可以自己定义

　　废话少说：直接上代码吧

html:——————————————————————————————————————————

　　　　　　

<!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>
 <link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
 <link rel="stylesheet" type="text/css" href="css/animate.css" />
 <link rel="stylesheet" type="text/css" href="css/mcshare.css" />
 <script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/sy.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/mcshare.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 　　<!--总控 及时间-->
 　　<div id="control">
 　　　　<div id="time"></div>
 　　　　<img src="img/C_play.png" />
 　　</div>
 　　<!--图片轮播部分-->
 　　<div class="swiper-container">
 　　　　<div class="swiper-wrapper">
 　　　　　　<div class="swiper-slide">图片1<img src="" /></div>
 　　　　　　<div class="swiper-slide">图片2<img src="" /></div>
 　　　　　　<div class="swiper-slide">图片3<img src="" /></div>
 　　　　</div>
 　　</div>
 　　<!--音乐人信息-->
 　　<div class="Musician">
 　　　　<div class="Head_portrait"><img src="" alt="" /></div>
 　　　　<img id="follow" src="img/follow.png" alt="" />
 　　　　<div id="Musician_name">东北权志龙</div>
 　　　　<img class="Fan_Icon" src="img/fanIcan.png" />
 　　　　<div id="FanNum">粉丝数：</div>
 　　　　<div id="FanNumNum">1515</div>
 　　　　<img class="geographical_position" src="img/geographicalposition.png" alt="" />
 　　　　<div id="loction">吉林省</div>
 　　　　<div id="Personality_tag">
 　　　　　　<span>流行</span>
 　　　　　　<span>流行</span>
 　　　　　　<span>流行</span>
 　　　　　　<span>流行</span>
 　　　　　　<span>流行</span>
 　　　　　　<span>流行</span>
 　　　　　　<span>流行</span>
 　　　　　　<span>流行</span>
 　　　　</div>
 　　　　<div class="Line"></div>
 　　　　<div class="left">他的作品（5）</div>
 　　</div>
 　　<!--作品列表-->
 　　<div class="work_list">
 　　　　<div>
 　　　　　　<audio src="https://raw.githubusercontent.com/kolber/audiojs/master/mp3/bensound-dubstep.mp3"></audio>
 　　　　　　<span>街角撸串</span>
 　　　　　　<img src="img/Collection_H.png" id="Collection" alt="" />
 　　　　　　<img src="img/Redplay.png" id="Red_play" />
 　　　　</div>
 　　　　<div>
 　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
 　　　　　　<span>街角撸串</span>
 　　　　　　<img src="img/Collection_H.png" id="Collection" />
 　　　　　　<img src="img/Redplay.png" id="Red_play" />
 　　　　</div>
 　　　　<div>
 　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
 　　　　　　<span>街角撸串</span>
 　　　　　　<img src="img/Collection_H.png" id="Collection" />
 　　　　　　<img src="img/Redplay.png" id="Red_play" />
 　　　　</div>
 　　　　<div>
 　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
 　　　　　　<span>街角撸串</span>
 　　　　　　<img src="img/Collection_H.png" id="Collection" />
 　　　　　　<img src="img/Redplay.png" id="Red_play" />
 　　　　</div>
 　　　　<div>
 　　　　　　<audio src="http://7o51kh.com2.z0.glb.qiniucdn.com/temp/voice/100230002/2017/5/1/7/201705011955438003932.mp3"></audio>
 　　　　　　<span>街角撸串</span>
 　　　　　　<img src="img/Collection_H.png" id="Collection" />
 　　　　　　<img src="img/Redplay.png" id="Red_play" />
 　　　　</div>
 　　</div>
 　　<!--麦唱下载-->
 　　<img id="MC_download" src="img/MC_download.jpg" />
 　　<!--底部bunner-->
 　　<div class="Bottom_navigation">
 　　　　<img src="" alt="" />
 　　　　<img src="" />
 　　　　<img src="" />
 　　</div> </body>
</html>
css:——————————————————————————————————————————
* {
 margin: 0;
 padding: 0;
}html,
body {
 width: 100%;
 height: 100%;
 background-color: #ededed;
}#control {

 text-align: center;
 z-index: 10;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 18.0rem;
 background: rgba(0, 0, 0, 0);
 margin: auto;
 line-height: 18.0rem;
}#control img {
 margin: auto;
 width: 4.0rem;
 height: 4.0rem;
}#control #time {
 position: absolute;
 left: 46.5%;
 top: 58%;
 line-height: 0;
 /*width: 100px;
 height: 30px;*/
}#audio {
 position: absolute;
 left: 0;
 top: 0;
}.swiper-container {
 width: 100%;
 height: 18.0rem;
 text-align: center;
 line-height: 15.0rem;
 font-size: 2.0rem;
/* background-color: beige;*/
}.swiper-wrapper {
 -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
 ;
 animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
 ;
}
.swiper-wrapper img{
 width: 100%;

}
.Musician {
 width: 100%;
 height: 11.75rem;
 background-color: #ffffff;
 position: relative;
}.Head_portrait {
 position: absolute;
 top: -0.9rem;
 left: 2.35rem;
 width: 6.5rem;
 height: 6.5rem;
 background-color: #ccc;
 border-radius: 10px;
 border: 2px solid #e76540;
 z-index: 10;
}
#Head_portrait img{
 width: 100%;
}#follow {
 position: absolute;
 left: 3.1rem;
 top: 6.5rem;
 width: 4.95rem;
 height: 1.75rem;
}#Musician_name {
 position: absolute;
 left: 11.1rem;
 top: 1.35rem;
 font-size: 1.5rem;
 color: #313a41;
}.Fan_Icon {
 position: absolute;
 left: 11.2rem;
 top: 3.6rem;
 width: 0.85rem;
 height: 0.7rem;
}#FanNum {
 position: absolute;
 left: 12.5rem;
 top: 3.5rem;
 font-size: 0.7rem;
 color: #9d9d9d;
}#FanNumNum {
 position: absolute;
 left: 15.0rem;
 top: 3.5rem;
 font-size: 0.8rem;
 /*font-weight: bold;*/
 color: #9d9d9d;
}.geographical_position {
 position: absolute;
 left: 11.25rem;
 top: 4.7rem;
 width: 0.65rem;
 height: 0.85rem;
}#loction {
 position: absolute;
 left: 12.5rem;
 top: 4.7rem;
 font-size: 0.7rem;
 color: #9d9d9d;
}#Personality_tag {
 position: absolute;
 left: 11.15rem;
 top: 6.65rem;
 width: 17.6rem;
}#Personality_tag span {
 display: inline-block;
 width: 2.4rem;
 height: 0.75rem;
 border: 1px solid #cccccc;
 border-radius: 5px;
 text-align: center;
 line-height: 0.8rem;
 font-size: 0.6rem;
 color: #949494;
}.Line {
 position: absolute;
 left: 0;
 top: 9.8rem;
 width: 100%;
 border-bottom: 1px solid #ededed;
}.left {
 position: absolute;
 left: 0.85rem;
 top: 10.25rem;
 font-size: 0.7rem;
 color: #8b8b8b;
}.work_list {
 width: 100%;
 /* height: 15rem;*/
 /*background-color: blue;*/
}.work_list div {
 position: relative;
 margin-top: 0.4rem;
 margin-left: 0.75rem;
 width: 30.4rem;
 height: 4.25rem;
 border-radius: 3px;
 background-color: #ffffff;
}.work_list div span {
 position: absolute;
 left: 1.4rem;
 top: 1.65rem;
 color: #4e4e4e;
 font-size: 1.1rem;
}#Collection {
 position: absolute;
 left: 25.2rem;
 top: 1.55rem;
 width: 1.5rem;
 height: 1.4rem;
}#Red_play {
 position: absolute;
 left: 27.5rem;
 top: 1.5rem;
 width: 1.45rem;
 height: 1.55rem;
}#MC_download {
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 3.4rem;
}.Bottom_navigation {
 width: 100%;
 height: 20rem;
 margin-top: 0.4rem;
 margin-bottom:3.4rem;
 background-color: saddlebrown;
}
.Bottom_navigation img{
 width: 100%;
}js：——————————————————————————————————————————
　
$(function() {
 //swiper
 var mySwiper = new Swiper('.swiper-container', {
 effect : 'fade',
 fade: {
 crossFade: true,
 },
 loop: true,
 autoplay: 2000,
 speed: 800,
 }); function xaizai() {
 var u = navigator.userAgent;
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isiOS == "true") {
 window.location.href = "此链接不做公开";
 } else {
 window.location.href = "此链接不做公开";
 }
 }
 $("#MC_download").on("click", function() {
 xaizai();
 })
 $("#follow").on("click", function() {
 xaizai();
 })
 $("div #Collection").on("click", function() {
 xaizai();
 })
 //获取所有的audio标签
 var audios = document.getElementsByTagName('audio');
 //获取上面总控制按钮
 var controul = document.querySelector("#control img");
 //获取下面所有的控制按钮
 var imgs = document.querySelectorAll("#Red_play");
 //新建一个数组
 var arr = [];
 //给上面总按钮添加的一个属性bol
 var bol2 = true;
 //获取播放时间的div获取
 var time = document.getElementById("time");
 //记录当前播放的第几首的num
 var num = null;
 //获取底部banner所有的img标签
// var banerImgs = document.querySelector(".Bottom_navigation img");

 $(".Bottom_navigation img").each(function(index){
 $(this).on("click",function(){
 xaizai();
 })
 }) //上面总按钮控制播放js
 $("#control img").on("click", function() {
 // alert(num)
 if(bol2 == true) {
 if(num == null) {
 num = 0;
 }
 $("#control img").attr("src", "img/C_stop.png");
 imgs[num].src = "img/redStop.png";
 bol2 = !bol2;
 audios[num].play();
 //展示歌曲总时长
 m = Math.floor(audios[num].duration / 60),
 s = Math.floor(audios[num].duration % 60); time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
 //监听当前歌曲播放是否完成
 audios[num].onended = function() {
 imgs[num].src = "img/Redplay.png";
 $("#control img").attr("src", "img/C_play.png");
 bol2 = true;
 imgs[num].bol = false;
 // this.bol2 = true;
 }
 imgs[num].bol = false;
 } else if(bol2 == false) {
 $("#control img").attr("src", "img/C_play.png");
 imgs[num].src = "img/Redplay.png";
 bol2 = !bol2;
 audios[num].pause();
 m = Math.floor(audios[num].duration / 60),
 s = Math.floor(audios[num].duration % 60);
 console.log(m);
 console.log(s);
 time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
 } })
 //下面播放按钮控制音频播放以及播放状态的js
 for(var i = 0; i < imgs.length; i++) {
 imgs[i].bol = true;
 imgs[i].index = i
 imgs[i].onclick = function() {
 // alert(this.bol)
 // this.bol = true;
 num = this.index; for(var j = 0; j < imgs.length; j++) {
 // imgs[j].bol2 = true;
 imgs[j].src = "img/Redplay.png";
 audios[j].pause();
 }
 if(this.bol) {
 num = this.index;
 audios[this.index].play();
 //监听当前音乐播放完
 audios[this.index].onended = function() {
 imgs[num].src = "img/Redplay.png";
 this.bol = true;
 $("#control img").attr("src", "img/C_play.png");
 }
 imgs[this.index].src = "img/redStop.png";
 controul.src = "img/C_stop.png";
 //初始化所有属性全设置成true
 for(var p = 0; p < imgs.length; p++) {
 imgs[p].bol = true;
 }
 //设置当前播放的属性
 this.bol = false;
 //给最上面开关设置属性属性同步
 bol = this.bol; //获取播放的总时间做展示
 m = Math.floor(audios[this.index].duration / 60),
 s = Math.floor(audios[this.index].duration % 60);
 time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
 } else if(this.bol == false) {
 // alert(222)
 audios[this.index].pause();
 imgs[this.index].src = "img/Redplay.png";
 controul.src = "img/C_play.png"; //初始化所有属性全设置成true
 for(var p = 0; p < imgs.length; p++) {
 imgs[p].bol = true;
 }
 this.bol = true;
 //属性同步 
 bol = this.bol;
 //获取播放的总时间做展示
 m = Math.floor(audios[this.index].duration / 60),
 s = Math.floor(audios[this.index].duration % 60);
 time.innerHTML = ((m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s);
 } }
 }
})

原理就是：一个音频对应一个audio标签，然后去用js控制按钮的联动；当然你也可以用一个audio标签，每次换歌曲的时候重新赋给它新的路径；