uni-app实现全局音乐播放器

项目需要，要求每一页内需要有一个播放器，管理播放状态以及切换歌曲

实现思路:vuex存储播放状态以及歌曲列表等信息

根目录下创建store目录
store下创建music.js

music.js内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {url:'',//地址max:0,//总时长schedule:0,//进度list:[],//目录music:uni.createInnerAudioContext(),//创建播放器对象is_bf:false,//当前播放状态index:0,//索引},mutations: {//设置播放列表setList(state,list){state.list=list;},//设置播放路径setMusicUrl(state,index) {console.log(index)//设置索引state.index=index;//设置路径state.url = state.list[index].url;//播放器引入urlstate.music.src = state.list[index].url;//初始化播放进度state.music.startTime=0;//开始播放state.music.play(); //执行播放//设置播放状态state.is_bf=true;//获取播放进度state.music.onTimeUpdate(() => {//设置总时长state.max=state.music.duration;//修改进度state.schedule=state.music.currentTime;})},//修改播放进度setSchedule(state,num) {state.schedule = state.max*num;state.music.currentTime=state.schedule;},//开始播放音频play(state,num) {state.is_bf=true;state.music.play();},//暂停当前播放的音频pause(state,num) {state.is_bf=false;state.music.pause();},},
})
export default store

components目录下新建music.vue

<template><view class="music_box"><view class="left_box"><view class="prev" @click="prev(index)">上一首</view><view class="bf" @click="setBf(!is_bf)"><view v-if="!is_bf">播放</view><view v-else>暂停</view></view><view class="next" @click="next(index,list)">下一首</view></view><!-- 进度条 --><view class="jd_box" @click="getXy"><view class="jd_n" :style="{width:schedule/max*100+'%'}"></view></view><!-- 时间 --><view class="timer_box">{{getTimer(schedule)}}/{{getTimer(max)}}</view><view class="list_icon" @click.stop="list_show=true">列表<view class="list_box" v-show="list_show" :style="{height:list.length*30+'px'}" ><view v-for="(item,id) in list" :class="{active:index==id}" @click.stop="setIndex(id)">{{item.title}}</view></view></view><!-- {{schedule}}/{{max}} --></view>
</template>
<script>import {mapGetters,mapMutations,mutations,mapState} from 'vuex'export default {data() {return {list_show:false,}},//监听数据发生变化watch: {schedule(val) {}},created() {},mounted() {// this.setSchedule('123');//修改进度条时间},computed: {...mapState(["schedule", "url", "max", "list","is_bf","index"])},methods: {...mapMutations(['setSchedule', 'setTestArrInc','play','pause','setMusicUrl']),prev(index){if(index<=0){return}this.setMusicUrl(index-1)},next(index,list){if(index>=list.length-1){return}this.setMusicUrl(index+1)},setIndex(index){this.setMusicUrl(index);this.list_show=false;},getTimer(second) {let h = parseInt(second / 60 / 60 % 24);h = h < 10 ? '0' + h : h;let m = parseInt(second / 60 % 60);m = m < 10 ? '0' + m : m;let s = parseInt(second % 60);s = s < 10 ? '0' + s : s;let res = [h, m, s];return res[0]+':'+res[1]+':'+res[2]},getXy(e){console.log((e.detail.x-(e.currentTarget.offsetLeft*(document.documentElement.clientWidth/1920))))this.setSchedule(((e.detail.x/(document.documentElement.clientWidth/1920))-e.currentTarget.offsetLeft)/500);},//设置播放状态setBf(is){if(is){this.play();}else{this.pause();}}},}
</script><style>.music_box {width: 100%;height: 80px;background-color: rgba(0,0,0,0.7);position: fixed;bottom: 0;left: 0;z-index: 99;display: flex;color: #fff;align-items: center;padding: 0 60px;box-sizing: border-box;justify-content: center;font-size: 20px;}.left_box{margin-right: 20px;display: flex;align-items: center;}.bf{width: 50px;height: 50px;border: 2px solid #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 20px;}.jd_box{width: 500px;height: 15px;background-color: rgba(255,255,255,0.5);margin-right: 20px;position: relative;}.jd_n{height: 100%;background-color: rgba(255,255,255,0.8);}.list_icon{margin-left: 20px;padding: 5px;border: 1px solid #fff;position: relative;}.list_box{width: 200px;position: absolute;left: 0;background-color: rgba(0,0,0,0.7);bottom: 60px;}.list_box>view{width: 100%;text-align: center;font-size: 16px;line-height: 30px;border-bottom: 1px solid #ccc;}.active{background: red;}
</style>

在需要播放器的页面内应用

<script>import {mapGetters,mapMutations,mutations,mapState} from 'vuex'export default {data() {return {}},onLoad() {},methods: {...mapMutations(['setList','setSchedule', 'setMusicUrl']),},mounted() {//设置目录this.setList([{title:'第一回',url:'http://sns-oss.oss-cn-beijing.aliyuncs.com/masterpieces/28/001.mp3'},{title:'第二回',url:'http://sns-oss.oss-cn-beijing.aliyuncs.com/masterpieces/28/002.mp3'}]);//设置播放索引this.setMusicUrl(0);}}
</script>

uni-app实现全局音乐播放器相关推荐

android手机App的开发——音乐播放器
安卓手机App开发: (包括打电话,发短信,音乐播放器,划屏) 环境的搭建 1.软件下载: Jdk-6u32-windows-x64.exe Android-sdk_r18-windows.zip E ...
app inventor入门详细教程（音乐播放器）01
App inventor 介绍简介 App Inventor是由Google公司开发的一款在线开放的Android编程工具软件,通过图形化积木式的拖放组件来完成Apps开发 App Inventor ...
android播放器实例,android音乐播放器实例
郑州app开发android音乐播放器实例.布局代码是一个imagebutton和seekbar. 下面是java代码 MainActivity.java package cn.xhhkj.music ...
自己动手实现音乐播放器app
MainActivity实现: 1.调用TabHost绑定不同的tags,图标,和content. mTabHost = (TabHost) findViewById(R.id.mTabHost);m ...
微信小程序实现音乐播放器（3）（使用全局数据实现数据共享）
文章目录前情提要搭建静态资源服务器小程序项目 app.json app.js app.wxss pages/index/index.json pages/index/index.wxml pag ...
android 带记忆功能的播放器源码,【全开源可二开】带后台管理面板的在线音乐播放器Android应用APP源码...
这是一款带后台管理面板的在线音乐播放器Android应用APP源码,可让您更快地构建在线和离线android音频播放器,代码全开源适合二次开发.该源码自带2个紫色和橙色主题(允许您添加更多主题),多语 ...
App设计灵感之十二组精美的音乐播放器App设计案例
带上耳机,打开这些风格独特的音乐播放器,进入音乐的世界. ① Podcast App by Herdetya Priambodo ② Playo Music player app by Hesam M ...
设计灵感|音乐播放器App界面如何设计？
音乐播放器 App 界面要怎么设计?来看看集设网精选的 12 款移动端音乐播放器,学习一下如何设计出一个易用性和交互性良好.设计感受舒适.展示层级清晰的界面. 音乐播放器App界面如何设计? - 集设 ...
音乐播放器App界面优秀案例，通过案例看大咖如何设计？
音乐播放器 App 界面要怎么设计?集设网 www.ijishe.ccom精选的 12 款移动端音乐播放器,学习一下如何设计出一个易用性和交互性良好.设计感受舒适.展示层级清晰的界面. 看这里

uni-app实现全局音乐播放器

uni-app实现全局音乐播放器相关推荐

最新文章

热门文章