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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_39813009/article/details/117814163
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/301721

相关文章

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Nginx部署React项目时重定向循环问题的解决方案

《Nginx部署React项目时重定向循环问题的解决方案》Nginx在处理React项目请求时出现重定向循环,通常是由于`try_files`配置错误或`root`路径配置不当导致的,本文给大家详细介... 目录问题原因1. try_files 配置错误2. root 路径错误解决方法1. 检查 try_f