361 lines
10 KiB
Vue
361 lines
10 KiB
Vue
<template>
|
|
<!--音频组件-->
|
|
<view>
|
|
<view class="bgfff">
|
|
<view>
|
|
<view class="audo-video">
|
|
|
|
<!-- 播放封面 -->
|
|
<view :class="['fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" :style="{ backgroundImage: `url(${fengImg})` }"></view>
|
|
<!-- <view v-else :class="['fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" style="{ border:1px solid red;backgroundImage: url('@/static/icon/fengziIcon.jpg') }">显示我</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.chapter}}</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:'',
|
|
nofengImg:'../../static/icon/fengziIcon.jpg'
|
|
}
|
|
},
|
|
created() {
|
|
this.libLIst = this.$bgm.musicList
|
|
this.fengImg = this.userInfo.fengImg
|
|
console.log(this.userInfo.fengImg,'this.userInfo.fengImg++++++++++++++')
|
|
this.userInfo.playTimes ? this.setUserInfo({'currentTime': this.userInfo.playTimes}) : ''
|
|
|
|
},
|
|
|
|
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)
|
|
},
|
|
},
|
|
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)
|
|
}
|
|
},
|
|
|
|
|
|
// 显示播放列表
|
|
showLib(){
|
|
this.LibVisible = true
|
|
},
|
|
|
|
|
|
// 拖动进度条
|
|
sliderChange(data) {
|
|
|
|
|
|
// console.log(data,'拖动进度条',data)
|
|
|
|
|
|
|
|
if(this.$bgm._options.src == ''){
|
|
this.$music.playBgm({mute:false})
|
|
// this.$bgm.pause()
|
|
}else{
|
|
this.$bgm.play()
|
|
}
|
|
console.log('拖动',data.detail.value)
|
|
uni.getBackgroundAudioManager().seek(data.detail.value)
|
|
// 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/home_icon_0.png'); background-size: cover;}
|
|
|
|
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>
|