前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio

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

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

audio.js audio.css 资源下载

详细代码上篇

样式

部分代码：

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.lengthif (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文本提示并退出});//获取音频播放keyif (!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);});*/

前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio相关推荐

带倍速音频播放器_带有播放列表HTML5音频播放器
带倍速音频播放器 HTML5 Audio player with playlist HTML5 audio player. Many of you faced with the task of cre ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
VUE实现音频播放器方案（播放列表）
在项目中,需要对某个景点多个介绍音频文件进行播放,建立这个音频播放器还是费了不少周折.前几天在做音频文件上传与管理时时一次是单个文件的上传.加载与播放还是比较简单,网上有很多案例,找来看看基本上就会, ...
Vue - 音频播放器插件（vue-aplayer）
Vue使用音频播放器插件 vue-aplayer vue-aplayer中文文档:https://aplayer.netlify.app/docs/guide/ GitHub文档:https://gi ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
vue音频播放器组件
因为原生audio 播放器太丑了重新整理百度综合完成了播放器, 基于element ui 组件书写的需要的自取 <template><div class="audio ...
iphone html5音乐播放器,HTML5音频播放器,播放列表
许多人创建过音频播放器.通常,您只需选择一个可用的素材,通常是flash player.然而,您可能已经注意到,这些移动设备上的flash播放器不能正常工作(iPhone和Android).今天我要告 ...
Vue项目——手把手教你做出音乐播放器
进入VueMusic-安装所需的东西 cnpm install 之后启动这个项目 npm start App.vue 设置默认样式 <template><div id=" ...
基于Vue和Axios的小型在线音乐播放器
目录思路一.音乐查询二.音乐播放三.歌曲封面四.歌曲评论五.播放动画六.播放MV 总结思路一个音乐播放器的功能: - 歌曲信息:封面,歌名,专辑,作者 - 控制器:上一首,下一首,暂 ...

前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio

样式

部分代码：

前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio相关推荐

最新文章

热门文章