zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

播放器雏形

Browse Source
This commit is contained in:
@fawn-nine
2023-08-11 14:54:03 +08:00
parent 72d35bae31
commit 57d70c40f2
768 changed files with 15285 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
components/cx-audio-play/cx-audio-play.vue Normal file
View File

@@ -0,0 +1,388 @@
<template>
<!--音频组件-->
<view>
<view class="bgfff">
<view>
<view class="audo-video">
<!-- 播放封面 -->
<view :class="['fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" :style="{ backgroundImage: `url(${fengImg})` }"></view>
<!--音频播放按钮处-->
<view class="audo-top">
<!-- 顺序播放 -->
<!-- <image v-if="orderPlayBtn" style="width:50rpx;height:50rpx;" src="/static/orderPlaya.png" mode="aspectFill" @click="orderPlay(false)"></image>
<image v-else style="width:50rpx;height:50rpx;" src="/static/orderPlay.png" mode="aspectFill" @click="orderPlay(true)"></image>
<!--上一首切换按钮-->
<!-- <image v-if="jian" @click="sig" src="/static/xys.png" style="width:50rpx;height:50rpx;transform:rotate(180deg)"
mode="aspectFill"></image>
<image v-else style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image>-->
<image class="prevMusic" @click="prevMusic" src="/static/xys.png" style="width:90rpx;height:90rpx;transform:rotate(180deg)"
mode="aspectFill"></image>
<!--上一首切换按钮-->
<!--播放按钮-->
<image :src="userInfo.playFlag ?'/static/bofang2.png':'/static/zt.png'" mode="aspectFill"
style="width:180rpx;height:180rpx;" @click="plays()"></image>
<!--播放按钮-->
<!--下一首切换按钮-->
<!-- <image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
mode="aspectFill"> </image>
<image v-else style="width:50rpx;height:50rpx;" src="/static/xys.png" @click="xig" mode="aspectFill"></image> -->
<image class="nextMusic" style="width:90rpx;height:90rpx;" src="/static/xys.png" @click="nextMusic" mode="aspectFill"></image>
<!-- 播放目录 -->
<image src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="showLib()"></image>
</view>
<!--音频播放按钮处-->
<view class="audo-a" style="margin:0 auto;">
<!--进度条-->
<view class="slider-box">
<text class="mm">{{timer}}</text>
<slider style="width: 370rpx;" @change="sliderChange" @changing="sliderChanging"
class="audio-slider" block-size="16" :min="0" :max="duration" :value="currentTime"
activeColor="#2fc348" @touchstart="lock= true" @touchend="lock = false" />
<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
<text class="ss" v-else>00.00</text>
</view>
<!--进度条-->
</view>
</view>
</view>
<!-- 播放列表 -->
<u-popup mode="bottom" :show="LibVisible" :round="10" @close="LibVisible=false" >
<view class="libTitle">播放列表</view>
<view class="tanchu playList" style="height:400rpx;overflow-y: scroll;">
<scroll-view style="height:400rpx; overflow-y: scroll;" scroll-y="true"
<view class="item" v-for="(item,index) in libLIst" :key="index" >
<view @click="listenOne(item)" :class="userInfo.playIndex == index ? 'playNow' : ''">
<view>{{item.chapterName}}</view>
</view>
</view>
</scroll-view>
</view>
</u-popup>
</view>
<view class="h-100"></view>
<!--占位-->
</view>
<!--音频组件 Author:chenxin-->
</template>
<script>
/*
list -- 音频文件传入 不传无法播放/数组形式
Faskms -- 快进秒数 number 默认15秒
Slowms -- 快退秒数 number 默认15秒
autoNext -- 是否自动播放下一首
autoplays -- 进入页面是否自动播放 - 默认false
slideYes -- 滑动进度条时是否开启播放 - 默认false
switAud -- 切换上下音频是否开启播放 - 默认false
BsNav -- 倍数数据传入/数组形式
按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
目前只测试 微信小程序和H5和APP -- 其他平台未知
Author:chenxin 交流vx:cxalq8-24
*/
import {
mapState,mapMutations
} from 'vuex';
export default {
name: "cx-audio-play",
props: {
list: { //音频数据
Type: Array,
default:[]
},
},
data() {
return {
playIndex: 0,// 播放器index
LibVisible:false,
libLIst:[],
fengUrl:'',
orderPlayBtn:false,
shows: false, //倍数弹框
show: true, //倍数弹框动画默认开启
// jia: true, //加-切换图标
succes: true, //播放按钮
bsid: '', //倍数默认显示第一个
bsindex: 2, //倍数默认显示第一个
num: 0,
current: 0, //当前选中的索引
recorPath: '', //音频播放地址
lock: false, // 锁
currentTime: 0, //当前进度
duration: 1, // 总进度
videoContext: null,
loading: true, //锁 加载
audioMannager:null ,// 背景音乐
saveInterVal:null,
fengImg:''
}
},
created() {
this.libLIst = this.$bgm.musicList
this.fengImg = this.userInfo.fengImg
},
computed: {
...mapState(['userInfo']),
timer() {
this.currentTime = this.userInfo.currentTime
return calcTimer(this.userInfo.currentTime)
},
overTimer() {
this.duration = this.userInfo.duration
return calcTimer(this.userInfo.duration)
},
// fengImg(){
// console.log(this.userInfo.fengImg,'-------------')
// return this.userInfo.fengImg
// }
},
watch: {
},
methods: {
...mapMutations(['setUserInfo']),
// 上一首
prevMusic(){
if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
this.$music.playBgm({mute:false})
this.$music.setPlayIndex('next')
}else{
this.$music.setPlayIndex('prev')
}
},
nextMusic(){ // 下一首
if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
this.$music.playBgm({mute:false})
this.$music.setPlayIndex('next')
}else{
this.$music.setPlayIndex('next')
}
},
//关闭或开启 音乐
plays() {
this.muteBgMusic = !this.muteBgMusic
console.log(this.muteBgMusic,this.muteBgMusic?'已关闭音乐####':'已开启音乐####');
if (this.userInfo.playFlag) {
// 暂停
// this.$music.playBgm({mute:true})
this.$bgm.pause()
} else {
// 播放
// this.$music.playBgm({mute:false})
if(this.$bgm._options.src == ''){
this.$music.playBgm({mute:false})
}else{
this.$bgm.play()
}
}
},
// 播放单个音频
listenOne(item){
if(this.$bgm._options.src == ''){
this.$music.playBgm({mute:false})
this.$music.setOneMusic(item)
}else{
this.$music.setOneMusic(item)
}
},
// 存储听书进度
saveListenRate(){
console.log('存储听书进度')
this.$emit('saveRate',this.currentTime)
},
// 顺序播放
orderPlay(val){
// console.log(val)
if(val){
uni.showToast({
title:'开启顺序播放',
icon:'none'
})
this.orderPlayBtn = true
}else{
uni.showToast({
title:'关闭顺序播放',
icon:'none'
})
this.orderPlayBtn = false
}
},
// 显示播放列表
showLib(){
this.LibVisible = true
},
// 拖动进度条
sliderChange(data) {
if(this.$bgm._options.src == ''){
this.$music.playBgm({mute:false})
// this.$bgm.pause()
}else{
this.$bgm.play()
}
console.log('拖动')
//此处滑动进度条--开始播放
// if (this.slideYes && !this.succes) {
// //#ifdef H5
// this.videoContext.play()
// //#endif
// //#ifndef H5
// this.videoContext.play()
// //#endif
// this.succes = true
// }
this.$bgm.seek(data.detail.value) //获取秒数
},
//拖动中
sliderChanging(data) {
this.$bgm.pause()
this.currentTime = data.detail.value
//console.log('拖动中',this.currentTime)
},
},
watch: {}
}
//时间换算
function calcTimer(timer) {
if (timer === 0 || typeof timer !== 'number') {
return '00:00'
}
let mm = Math.floor(timer / 60)
let ss = Math.floor(timer % 60)
if (mm < 10) {
mm = '0' + mm
}
if (ss < 10) {
ss = '0' + ss
}
return mm + ':' + ss
}
</script>
<style lang="scss" scoped>
.graytitle{color: #999;}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.playAnimate{
-webkit-transform: rotate(360deg);
animation: rotation 6s linear infinite;
-moz-animation: rotation 6s linear infinite;
-webkit-animation: rotation 6s linear infinite;
-o-animation: rotation 6s linear infinite;
}
.fengmianBox{text-align: center; width: 400rpx; height: 400rpx; position: relative; border-radius: 400rpx; margin: 0 auto; margin-bottom: 140rpx; background-size: contain;}
.fengmianBox:after{
content: ''; display: inline-block; left:0; top:0; z-index: 0;width: 400rpx; height: 400rpx; position: absolute; border-radius: 400rpx; box-shadow: rgba(177, 235, 202, 0.8) 0px 0px 29px 0px;
}
.fengmianBox.defaultBg{background-image: url('@/static/icon/x1.jpg');}
page {
background-color: #F6F6F8;
}
/* #video {
width: 100%;
} */
.audo-video {
padding-bottom: 20rpx;
color: #999;
}
.slider-box {
display: flex;
align-items: center;
justify-content: center;
font-size: 27rpx;
color: #999; margin: 0 auto;
}
button {
display: inline-block;
width: 100rpx;
background-color: #fff;
font-size: 24rpx;
color: #000;
padding: 0;
}
.hidden {
position: fixed;
top: 0;
left: -10rpx;
z-index: -1;
width: 1rpx;
height: 1rpx;
}
.audo-top {
padding: 20rpx 40rpx;
display: flex;
justify-content: space-around;
align-items: center;
image {
width: 45rpx;
height: 45rpx;
}
}
.audo-a {
display: flex;
justify-content: space-between;
align-items: center;
width: 750rpx;
position: relative;
z-index: 9; margin: 0 auto;
}
.beishu {
position: relative;
width: 100rpx;
padding-top: 5rpx;
padding-bottom: 5rpx;
text-align: center;
border-radius: 25rpx;
font-size: 28rpx;
}
.absolute {
position: absolute;
.beishu-a {
width: 200rpx;
border-radius: 20rpx;
text-align: center;
line-height: 90rpx;
background: #fff;
.title {
pdding-left: 30rpx;
}
}
}
</style>