vue绑定html音乐播放器,html 配合vue 带播放列表切换的 音频播放器 audio

一个h5的音频播放器，播放列表与播放器上下首切换 样式效果对应起来。

五秒后自动收缩形成挂件(不可移动)。点击播放器图片 即可展开、收起。

audio.js    audio.css  资源下载

详细代码上篇

样式

部分代码：

html

详情页

****

****

****

{{key+1}}



{{list.title}}

{{list.num}}人

{{list.time}}

****

****

****

未知歌曲

00:00

00:00

☺随心听

关闭

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);

});

*/