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

本文主要是介绍vue绑定html音乐播放器,html 配合vue 带播放列表切换的 音频播放器 audio,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

audio.js    audio.css  资源下载

详细代码上篇

样式

51b5fa56ad329345b52565d19dcd436d.png                         80b78c53bdc86fbc23c802c109a6d2f0.png

部分代码:

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

});

*/

这篇关于vue绑定html音乐播放器,html 配合vue 带播放列表切换的 音频播放器 audio的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/301721

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...