一個h5的音頻播放器，播放列表與播放器上下首切換 樣式效果對應起來。
五秒後自動收縮形成掛件（不可移動）。點擊播放器圖片 即可展開、收起。
樣式
部分代碼：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<title>詳情頁</title>
<script src="https***query_172.js" language="javascript"></script>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!--動畫樣式-->
<link href="http:***/animate.css" rel="stylesheet" type="text/css">
<!--音頻播放器-->
<link rel="stylesheet" type="text/css" href="./css/audio.css">
<script type="text/javascript" src="./js/audio.js"></script>
</head>
<body>
****
****
****
<!-- 播放列表 -->
<ul :class="mp3_count >= 1?'music':'hid'" id="storyLin">
<li v-for="(list,key) in data.mp3_list" @click="playSon(this,key)" :class="{'on':clicked==key}">
<div :class="[{'hid':clicked ==key}, num]">{{key+1}}</div>
<div :class="[{'hid':clicked !=key}, laba]"></div>
<div class="name">
<p>{{list.title}}</p>
<div class="dat">
<span></span>{{list.num}}人
<span style="margin-left: 20px;"></span>{{list.time}}
</div>
</div>
</li>
</ul>
****
****
****
<!-- <div :class="mp3_count >= 1 ? 'audio-box hid':'hid'">-->
<div :class="[{'hid':mp3_count < 1}, audio_box]">
<div class="audio-container">
<div class="audio-cover" @click="goRight()"></div>
<div class="audio-view">
<h3 class="audio-title">未知歌曲</h3>
<div class="audio-body">
<div class="audio-backs">
<div class="audio-this-time">00:00</div>
<div class="audio-count-time">00:00</div>
<div class="audio-setbacks">
<i class="audio-this-setbacks">
<span class="audio-backs-btn"></span>
</i>
<span class="audio-cache-setbacks">
</span>
</div>
</div>
</div>
<div class="audio-btn">
<div class="audio-select">
<div class="audio-prev"></div>
<div class="audio-play"></div>
<div class="audio-next"></div>
<!-- <div class="audio-menu"></div>-->
<!-- <div class="audio-volume"></div>-->
</div>
<div class="audio-set-volume">
<div class="volume-box">
<i><span></span></i>
</div>
</div>
<div class="audio-list">
<div class="audio-list-head">
<p>☺隨心聽</p>
<span class="menu-close">關閉</span>
</div>
<ul class="audio-inline">
</ul>
</div>
</div>
</div>
</div>
</div>
<!--音頻播放器-->
</div>
</body>
</html>
js方法
var api = "htt***p";
var song = [];//定義播放列表（可後續添加）
var audioFn = [];//播放器類
var main = new Vue({
el: '#main',
data: {
****
audio_type: 2,//播放器是否展示隱藏,
clicked: -1,
num: 'num',
laba: 'laba',
audio_box:'audio-box audio-boxhid'
},
created() {
var that = this;
that.get_data();//內含實例化 播放器
},
methods: {
//獲取專輯信息
get_data() {
var that = this;
$.get(
api + '?meth***r_id=' + that.user_id + '&id=' + that.id,
function (data) {
if (data.ret) {
that.data = data.data;
//音頻列表賦值,並實例化音頻組件
song = that.data.mp3_list;//播放列表
that.mp3_count = song.length
if (that.mp3_count >= 1) {
that.new_audio(song);
}
} else {
alert('數據獲取失敗！')
}
},
'json'
)
},
//實例化音頻播放
new_audio(song) {
var that = this;
audioFn = audioPlay({
song: song,
autoPlay: false //是否立即播放第一首，autoPlay爲true且song爲空，會alert文本提示並退出
});
//獲取音頻播放key
if (!songEq) {
songEq = -1
}
//監聽當前播放曲目的key值，對應播放列表樣式
setInterval(function () {
that.clicked = songEq;
}, 300)
},
/*
音頻播放器相關操作
*/
playSon(th, key) {
var that = this;
clearTimeout(that.clock);//清除定時器
$(".audio-box").removeClass("hid");
$(".audio-box").removeClass("audio-boxhid");
audioFn.selectMenu(key, true);
that.clicked = key;
that.clock = setTimeout(function () {
$(".audio-box").addClass("audio-boxhid");
that.audio_type = 2;
}, 5000);
},
//控制播放器是否展開
goRight() {
var that = this;
//清除定時器
clearTimeout(that.clock);
//播放器是否收起
if (that.audio_type == 1) {
$(".audio-box").addClass("audio-boxhid");
that.audio_type = 2;
} else {
$(".audio-box").removeClass("audio-boxhid");
that.audio_type = 1;
}
//5秒定時器 過後自動收起
that.clock = setTimeout(function () {
$(".audio-box").addClass("audio-boxhid");
that.audio_type = 2;
}, 5000);
}
}
})
/*
$(function () {
// 向歌單中添加新曲目，第二個參數true爲新增後立即播放該曲目，false則不播放
audioFn.newSong({
'cover': 'images/audio/cover4.jpg',
'src': 'http://filebaby.qubaobei.com/story/low/105.mp3',
'title': '極樂淨土 - GARNiDELiA'
}, false);
// 暫停播放
audioFn.stopAudio();
// 開啓播放
audioFn.playAudio();
// 選擇歌單中索引爲3的曲目(索引是從0開始的)，第二個參數true立即播放該曲目，false則不播放
audioFn.selectMenu(3,true);
// 查看歌單中的曲目
console.log(audioFn.song);
// 當前播放曲目的對象
console.log(audioFn.audio);
});
*/