播放器雏形
This commit is contained in:
@fawn-nine
682
components/cx-audio-play/cx-audio-play - 副本.vue
Normal file
682
components/cx-audio-play/cx-audio-play - 副本.vue
Normal file
@@ -0,0 +1,682 @@
|
||||
<template>
|
||||
<!--音频组件-->
|
||||
<view>
|
||||
<view class="bgfff">
|
||||
<view>
|
||||
<view class="audo-video">
|
||||
|
||||
<!-- 播放封面 -->
|
||||
<view :class="['fengmianBox','defaultBg', succes ? '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 src="/static/kt.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kt()"></image> -->
|
||||
<!--快退按钮-->
|
||||
|
||||
<!--播放按钮-->
|
||||
<image :src="succes?'/static/bofang2.png':'/static/zt.png'" mode="aspectFill"
|
||||
style="width:180rpx;height:180rpx;" @click="plays()"></image>
|
||||
<!--播放按钮-->
|
||||
|
||||
<!--快进按钮-->
|
||||
<!-- <image src="/static/kj.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kj()"></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 src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="showLib()"></image>
|
||||
|
||||
</view>
|
||||
<!--音频播放按钮处-->
|
||||
|
||||
|
||||
|
||||
<!--音频api处[视频代替音频-实现倍数功能]-->
|
||||
<video id="myVideo" ref="myVideo" :src="recorPath" class="hidden" @timeupdate="timeupdate"
|
||||
:autoplay="autoplays" @loadedmetadata="loadedmetadata" @ended="next" controls
|
||||
style="width: 10rpx;height:10rpx;">
|
||||
</video>
|
||||
<!--音频api处[视频代替音频-实现倍数功能]-->
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
</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:[]
|
||||
},
|
||||
fengImg:{
|
||||
// 封面img
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
Faskms: { //快进秒数
|
||||
Type: Number,
|
||||
default: 15,
|
||||
},
|
||||
jia:{
|
||||
Type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// orderPlayBtn:{
|
||||
// // 按顺序播放
|
||||
// Type: Boolean,
|
||||
// default: false
|
||||
// },
|
||||
Slowms: { //快退秒数
|
||||
Type: Number,
|
||||
default: 15,
|
||||
},
|
||||
autoNext: {
|
||||
Type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
autoplays: { //是否开启自动播放
|
||||
Type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
slideYes: { //滑动进度条 - 是否开启播放
|
||||
Type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
switAud: {
|
||||
Type: Boolean, //切换上下音频 - 是否开启播放
|
||||
default: false,
|
||||
},
|
||||
|
||||
jian: { //减-切换图标
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
cctime:{ // 初始化播放位置（秒）
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
BsNav: { //倍数-传入 0.5/0.8/1.0/1.25/1.5/2.0
|
||||
Type: Array,
|
||||
default: () => [{
|
||||
id: 0.5,
|
||||
bs: '0.5',
|
||||
}, {
|
||||
id: 0.8,
|
||||
bs: '0.8'
|
||||
}, {
|
||||
id: 1.0,
|
||||
bs: '1.0'
|
||||
},{
|
||||
id: 1.25,
|
||||
bs: '1.25'
|
||||
},{
|
||||
id: 1.5,
|
||||
bs: '1.5'
|
||||
},{
|
||||
id: 2.0,
|
||||
bs: '2.0'
|
||||
}
|
||||
|
||||
],
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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,
|
||||
}
|
||||
},
|
||||
onReady() {},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
onBackPress() {
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.cctime,'cctime') // 默认播放的位置（秒），第一次加载
|
||||
this.videoContext = uni.getBackgroundAudioManager()
|
||||
// this.videoContext = uni.createVideoContext('myVideo', this)
|
||||
//默认播放第一个 -- 按钮展示
|
||||
if (this.list.length != 0) {
|
||||
this.loading = true
|
||||
this.videoContext.title = '暂无'
|
||||
this.videoContext.singer = '暂无'
|
||||
this.videoContext.coverImgUrl = this.fengImg
|
||||
this.videoContext.src = this.list[0].recorPath
|
||||
this.playloading()
|
||||
// if (this.list.length > 1) { //音频文件大于1 -- 下一个切换默认显示
|
||||
// // this.jia = false
|
||||
// if (this.autoplays) {
|
||||
// this.succes = true
|
||||
// }
|
||||
// }
|
||||
}
|
||||
this.videoContext.onEnded(() => {
|
||||
this.next()
|
||||
//this.setUserInfo({playFlag:false});
|
||||
//console.log(this.userInfo.playFlag,'playFlag')
|
||||
}) // 播放结束加载下一首
|
||||
this.videoContext.onError((err) => {
|
||||
console.log(err)
|
||||
this.setUserInfo({playFlag:true});
|
||||
this.next()
|
||||
}) // 播放错误加载下一首
|
||||
|
||||
this.videoContext.onCanplay(() =>{
|
||||
// this.setUserInfo({playFlag:true});
|
||||
// console.log(this.userInfo.playFlag,'playFlag')
|
||||
this.duration = this.videoContext.duration
|
||||
// this.loading = false
|
||||
uni.hideLoading()
|
||||
this.succes = true
|
||||
if(this.cctime.flag == 'init'){
|
||||
// 页面初始化时
|
||||
this.currentTime = this.cctime.time
|
||||
// 跳转到指定的秒数上
|
||||
this.videoContext.seek(this.currentTime)
|
||||
console.log('获取到初始值，进行时间跳转')
|
||||
}
|
||||
})
|
||||
this.videoContext.onPlay(() => {
|
||||
this.playSeconds = Math.ceil(this.currentTime) // 秒数取整
|
||||
|
||||
})
|
||||
this.videoContext.onTimeUpdate((res) => {
|
||||
//console.log(this.videoContext.currentTime,'onTimeUpdate');
|
||||
this.currentTime = Math.max(0, this.videoContext.currentTime)
|
||||
// console.log(this.currentTime,'当前秒数');
|
||||
// var ss = Math.floor(this.playSeconds / 60)
|
||||
// console.log(ss, this.playSeconds)
|
||||
// if(ss > this.playSeconds){
|
||||
// this.playSeconds = ss
|
||||
// console.log(ss)
|
||||
|
||||
// }
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onHide() { //监听页面离开 - 销毁音频
|
||||
// this.videoContext.stop();
|
||||
console.log('onHide')
|
||||
},
|
||||
onUnload() { //监听页面卸载 - 销毁音频
|
||||
// this.videoContext.stop();
|
||||
console.log('onUnload')
|
||||
},
|
||||
destroyed() {
|
||||
// if(this.videoContext){
|
||||
// this.videoContext.stop();
|
||||
// }
|
||||
console.log('destroyed')
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
timer() {
|
||||
return calcTimer(this.currentTime)
|
||||
},
|
||||
overTimer() {
|
||||
return calcTimer(this.duration)
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setUserInfo']),
|
||||
// 存储听书进度
|
||||
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.$emit('showLib',true)
|
||||
},
|
||||
plays() { //播放暂停
|
||||
if (!this.list || this.list.length == 0) {
|
||||
uni.showToast({
|
||||
title: '暂无音频数据~',
|
||||
icon: "none"
|
||||
})
|
||||
// console.log('暂无音频数据.~')
|
||||
return;
|
||||
}
|
||||
// this.playloading()
|
||||
this.succes = !this.succes
|
||||
/// console.log('修改后',this.succes)
|
||||
if (this.succes) {
|
||||
console.log('去播放',this.succes)
|
||||
// this.setUserInfo({playFlag:true});
|
||||
this.videoContext.play()
|
||||
|
||||
} else {
|
||||
// this.succes = false
|
||||
console.log('去暂停',this.succes )
|
||||
// this.setUserInfo({playFlag:false});
|
||||
uni.hideLoading()
|
||||
//#ifdef H5
|
||||
this.videoContext.pause()
|
||||
this.saveListenRate()
|
||||
//#endif
|
||||
//#ifndef H5
|
||||
this.videoContext.pause()
|
||||
this.saveListenRate()
|
||||
//#endif
|
||||
|
||||
}
|
||||
},
|
||||
// beishu() { //倍速弹框
|
||||
// this.shows = !this.shows
|
||||
// },
|
||||
// 倍速
|
||||
// setRate(index, item) {
|
||||
// this.bsid = item.id
|
||||
// this.bsindex = index
|
||||
// this.shows = false
|
||||
// //#ifdef H5
|
||||
// this.videoContext.playbackRate(2)
|
||||
// //#endif
|
||||
// //#ifndef H5
|
||||
// this.videoContext.playbackRate(2)
|
||||
// //#endif
|
||||
// },
|
||||
|
||||
// 更新进度条
|
||||
timeupdate(event) {
|
||||
if (this.lock) return; // 锁
|
||||
var currentTime, duration;
|
||||
if (event.detail.detail) {
|
||||
currentTime = event.detail.detail.currentTime
|
||||
duration = event.detail.detail.duration
|
||||
} else {
|
||||
currentTime = event.detail.currentTime
|
||||
duration = event.detail.duration
|
||||
}
|
||||
this.currentTime = currentTime
|
||||
this.duration = duration
|
||||
},
|
||||
|
||||
// 拖动进度条
|
||||
sliderChange(data) {
|
||||
//此处滑动进度条--开始播放
|
||||
if (this.slideYes && !this.succes) {
|
||||
//#ifdef H5
|
||||
this.videoContext.play()
|
||||
//#endif
|
||||
//#ifndef H5
|
||||
this.videoContext.play()
|
||||
//#endif
|
||||
this.succes = true
|
||||
}
|
||||
//#ifdef H5
|
||||
this.videoContext.seek(data.detail.value) //获取秒数
|
||||
//#endif
|
||||
//#ifndef H5
|
||||
this.videoContext.seek(data.detail.value) //获取秒数
|
||||
//#endif
|
||||
},
|
||||
|
||||
//拖动中
|
||||
sliderChanging(data) {
|
||||
if (data.detail.value == 0) {
|
||||
this.succes = false
|
||||
//#ifdef H5
|
||||
this.videoContext.pause()
|
||||
//#endif
|
||||
//#ifndef H5
|
||||
this.videoContext.pause()
|
||||
//#endif
|
||||
}
|
||||
this.currentTime = data.detail.value
|
||||
},
|
||||
|
||||
// 视频加载完成
|
||||
loadedmetadata(data) {
|
||||
this.duration = data.detail.duration
|
||||
},
|
||||
sig() { //上一首
|
||||
this.$emit('playPrev',true)
|
||||
// if (!this.list || this.list.length == 0) {
|
||||
// console.log('暂无音频数据~')
|
||||
// return;
|
||||
// }
|
||||
// this.num -= 1
|
||||
// console.log(this.num,'this.num')
|
||||
// if (this.num < this.list.length) {
|
||||
// this.loading = true
|
||||
// this.playloading() //加载框
|
||||
// }
|
||||
// if (this.num + 1 < this.list.length && this.num + 1 != 1) { //点击上一首小于音频数据总长度
|
||||
// // this.jia = false // 下按钮-亮且可点击
|
||||
// // this.jian = false // 上按钮-亮且可点击
|
||||
// } else {
|
||||
// // this.jian = true // 上按钮-灰且阻止
|
||||
// // this.jia = false // 下按钮-亮且可点击
|
||||
// }
|
||||
// this.recorPath = this.list[this.num].recorPath
|
||||
// if (this.switAud) { //切换时是否默认开启播放
|
||||
// this.succes = true
|
||||
// setTimeout(() => {
|
||||
// //#ifdef H5
|
||||
// this.$refs.myVideo.play()
|
||||
// //#endif
|
||||
// //#ifndef H5
|
||||
// this.videoContext.play()
|
||||
// //#endif
|
||||
// }, 100)
|
||||
// } else {
|
||||
// this.succes = false
|
||||
// }
|
||||
},
|
||||
xig() { //下一首
|
||||
|
||||
this.$emit("xiayishou");
|
||||
|
||||
// if (!this.list || this.list.length == 0) {
|
||||
// console.log('暂无音频数据~')
|
||||
// return;
|
||||
// }
|
||||
// this.num += 1
|
||||
// if (this.num < this.list.length) {
|
||||
// this.loading = true
|
||||
// this.playloading() //加载框
|
||||
// }
|
||||
// if (this.num + 1 < this.list.length) { //点击下一首小于音频数据总长度
|
||||
// this.jia = false // 下按钮-亮且可点击
|
||||
// this.jian = false // 上按钮-亮且可点击
|
||||
// } else { //大于总长度
|
||||
// this.jia = true //下按钮 - 灰且阻止
|
||||
// this.jian = false //上按钮 - 亮可点击
|
||||
// }
|
||||
// this.recorPath = this.list[this.num].recorPath
|
||||
// if (this.switAud) { //切换时是否默认开启播放
|
||||
// this.succes = true
|
||||
// setTimeout(() => {
|
||||
// //#ifdef H5
|
||||
// this.$refs.myVideo.play()
|
||||
// //#endif
|
||||
// //#ifndef H5
|
||||
// this.videoContext.play()
|
||||
// //#endif
|
||||
// }, 100)
|
||||
// } else {
|
||||
// this.succes = false
|
||||
// }
|
||||
},
|
||||
nosig() {
|
||||
uni.showToast({
|
||||
title: '到头了~',
|
||||
icon: "none"
|
||||
})
|
||||
},
|
||||
noxig() {
|
||||
uni.showToast({
|
||||
title: '没有更多了~',
|
||||
icon: "none"
|
||||
})
|
||||
},
|
||||
next(data) { //监听音频结束
|
||||
// console.log('开始播放下一首')
|
||||
this.succes = false
|
||||
/*音频结束--是否自动播放下一首*/
|
||||
//if(this.orderPlayBtn){
|
||||
setTimeout(()=>{
|
||||
this.$emit("xiayishou");
|
||||
},100)
|
||||
// }else{
|
||||
// console.log('音频结束-------')
|
||||
// return
|
||||
// }
|
||||
// if (!this.autoNext) {
|
||||
// return
|
||||
// }
|
||||
// if (this.num + 1 < this.list.length) {
|
||||
// this.succes = true
|
||||
// this.num += 1
|
||||
// this.recorPath = this.list[this.num].recorPath
|
||||
// setTimeout(() => {
|
||||
// //#ifdef H5
|
||||
// this.$refs.myVideo.play()
|
||||
// //#endif
|
||||
// //#ifndef H5
|
||||
// this.videoContext.play()
|
||||
// //#endif
|
||||
// }, 100)
|
||||
// } else {
|
||||
// //this.jia = true //下按钮 - 灰且阻止
|
||||
// //this.jian = false //上按钮 - 亮可点击
|
||||
// }
|
||||
|
||||
},
|
||||
playloading() { //加载框--封
|
||||
if (this.loading) {
|
||||
uni.showLoading({
|
||||
title: "音频缓存中..."
|
||||
})
|
||||
this.loading = false
|
||||
}
|
||||
this.succes = false
|
||||
// setTimeout(() => {
|
||||
// uni.hideLoading()
|
||||
// }, 1600)
|
||||
},
|
||||
},
|
||||
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>
|
||||
@-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>
|
||||
388
components/cx-audio-play/cx-audio-play.vue
Normal file
388
components/cx-audio-play/cx-audio-play.vue
Normal 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>
|
||||
58
components/cx-audio-play/miniplay.vue
Normal file
58
components/cx-audio-play/miniplay.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="minishow" class="fuchuang" style="width: 750rpx;">
|
||||
我是浮窗
|
||||
|
||||
<view class="libTitle">播放列表</view>
|
||||
|
||||
<view class="libTitle"v-for="(item,index) in libLIst">{{item.chapterName}}</view>
|
||||
|
||||
<view class="tanchu playList">
|
||||
<!-- <u-button>显示目录</u-button> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "miniPlay",
|
||||
props: {
|
||||
LibVisible:{
|
||||
Type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
minishow:true,
|
||||
|
||||
playid:1,
|
||||
libLIst:[
|
||||
{
|
||||
'chapterName':1,
|
||||
'chapterId':1
|
||||
},
|
||||
{
|
||||
'chapterName':2,
|
||||
'chapterId':1
|
||||
},
|
||||
{
|
||||
'chapterName':3,
|
||||
'chapterId':1
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLib(){
|
||||
this.LibVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fuchuang{font-size: 20px; position:fixed; right: 0; bottom: 70px; background: green; z-index: 55;}
|
||||
</style>
|
||||
BIN
components/cx-audio-play/statics/bofang2.png
Normal file
BIN
components/cx-audio-play/statics/bofang2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
components/cx-audio-play/statics/bofangxiao.png
Normal file
BIN
components/cx-audio-play/statics/bofangxiao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
components/cx-audio-play/statics/kj.png
Normal file
BIN
components/cx-audio-play/statics/kj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
components/cx-audio-play/statics/kt.png
Normal file
BIN
components/cx-audio-play/statics/kt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
components/cx-audio-play/statics/play-icon-audio.png
Normal file
BIN
components/cx-audio-play/statics/play-icon-audio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
components/cx-audio-play/statics/stop-play-btn.png
Normal file
BIN
components/cx-audio-play/statics/stop-play-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 967 B |
BIN
components/cx-audio-play/statics/sys.png
Normal file
BIN
components/cx-audio-play/statics/sys.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 799 B |
BIN
components/cx-audio-play/statics/tabbar/tabbarimg.jpg
Normal file
BIN
components/cx-audio-play/statics/tabbar/tabbarimg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
BIN
components/cx-audio-play/statics/zanting.png
Normal file
BIN
components/cx-audio-play/statics/zanting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
components/cx-audio-play/statics/zt.png
Normal file
BIN
components/cx-audio-play/statics/zt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
121
components/emoji/emojifont-popup.vue
Normal file
121
components/emoji/emojifont-popup.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<uni-popup ref="confirm" type="bottom" mask-background-color="rgba(0, 0, 0, 0)" :isMaskClick="true">
|
||||
<view style="height: 600rpx;background-color: #F0F0F0;" class="flex flex-column align-start justify-center flex-1 border-top">
|
||||
<swiper :current="current" class="flex-1" style="width: 750rpx;">
|
||||
<swiper-item>
|
||||
<!-- <text class="emojiicon">쀁</text> -->
|
||||
<scroll-view :scroll-y="true" :show-scrollbar="false" class="flex flex-row justify-start flex-wrap flex-1 px-2" style="">
|
||||
<text class="emojifont px-1 py-1" @click="onClick(val)" style="font-size: 35px;" v-for="(val,index) in [...emojis]" :key="index">{{val}}</text>
|
||||
<view style="height: 100rpx;width: 600rpx;"></view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emojis from '@/components/emoji/emojis.js';
|
||||
let timer = null
|
||||
export default {
|
||||
name: 'em-header',
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
styles: {},
|
||||
confirm:null,
|
||||
menus:[],
|
||||
title:"",
|
||||
emojis:emojis,
|
||||
current:0,
|
||||
favor_face_list:[],
|
||||
menusList:[]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
async created() {
|
||||
let emojisList = [];
|
||||
for (let i = 0; i <= 82; i++) {
|
||||
emojisList.push(`/uC${this.transformnum(i)}`)
|
||||
}
|
||||
console.log(emojisList)
|
||||
},
|
||||
methods: {
|
||||
transformnum(num){
|
||||
let len = 3 //显示的长度，如果以0001则长度为4
|
||||
num = parseInt(num, 10) + 1//转数据类型，以十进制自增
|
||||
num = num.toString()//转为字符串
|
||||
while (num.length < len) {//当字符串长度小于设定长度时，在前面加0
|
||||
num = "0" + num
|
||||
}
|
||||
return num
|
||||
},
|
||||
onClick(e){
|
||||
console.log(e)
|
||||
this.confirm(e)
|
||||
},
|
||||
open({confirm}){
|
||||
if(confirm) this.confirm = confirm
|
||||
this.$refs.confirm.open()
|
||||
this.$refs.confirm.closeMask()
|
||||
},
|
||||
onClose(e){},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.camera-icon{
|
||||
padding: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 32px;
|
||||
}
|
||||
.border-bottom{
|
||||
border-bottom-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #EBEBEB;
|
||||
}
|
||||
.list-item-left-icon-text {
|
||||
font-size: 26px;
|
||||
}
|
||||
.emojifont {
|
||||
font-family: emojifont !important;
|
||||
font-style: normal;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.px-2 {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.px-1 {
|
||||
padding-left: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 10rpx;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
</style>
|
||||
5
components/emoji/emojis.js
Normal file
5
components/emoji/emojis.js
Normal file
@@ -0,0 +1,5 @@
|
||||
|
||||
let emojis = ['\uC001','\uC002','\uC003','\uC004','\uC005','\uC006','\uc007','\uc008','\uC009','\uC010','\uC011','\uC012','\uC013','\uC014','\uC015','\uC016','\uC017','\uC018','\uC019','\uC020','\uC021','\uC022','\uC023','\uC024','\uC025','\uC026','\uC027','\uC028','\uC029','\uC030','\uC031','\uC032','\uC033','\uC034','\uC035','\uC036','\uC037','\uC038','\uC039','\uC040','\uC041','\uC042','\uC043','\uC044','\uC045','\uC046','\uC047','\uC048','\uC049','\uC050','\uC051','\uC052','\uC053','\uC054','\uC055','\uC056','\uC057','\uC058','\uC059','\uC060','\uC061','\uC062','\uC063','\uC064','\uC065','\uC066','\uC067','\uC068','\uC069','\uC070','\uC071','\uC072','\uC073','\uC074','\uC075','\uC076','\uC077','\uC078','\uC079','\uC080','\uC081','\uC082']
|
||||
//let emojis = ['\uC001']
|
||||
|
||||
export default emojis
|
||||
353
components/music.vue
Normal file
353
components/music.vue
Normal file
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<view>
|
||||
<view :class="['fuchuang',showBig?'bigMode':'miniMode']" v-show="userInfo.playVisible">
|
||||
<view>
|
||||
<view class="audo-video" >
|
||||
<!--音频播放按钮处-->
|
||||
<view class="audo-top">
|
||||
<!-- 播放封面 -->
|
||||
<image @click="changeShow" style="width: 120rpx; height: 120rpx; margin-top: 0;" :class="['fengImg','fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" :src="userInfo.fengImg" mode="aspectFill"></image>
|
||||
|
||||
<!-- <u-icon name="arrow-right" color="#61e781" size="28" v-else @click="changeShow"></u-icon> -->
|
||||
<!--上一首切换按钮-->
|
||||
|
||||
<!-- <image class="prevMusic" @click="prevMusic" src="/static/xys.png"
|
||||
mode="aspectFill"></image> -->
|
||||
<!-- <image v-else style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image> -->
|
||||
<!--上一首切换按钮-->
|
||||
|
||||
<!--快退按钮-->
|
||||
<!-- <image src="/static/kt.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kt()"></image> -->
|
||||
<!--快退按钮-->
|
||||
|
||||
<!--播放按钮-->
|
||||
<image class="plays" :src="userInfo.playFlag ?'/static/zantigBtn.png':'/static/bofangBtn.png'" mode="aspectFill"
|
||||
style="" @click.stop="plays()"></image>
|
||||
<!--播放按钮-->
|
||||
|
||||
<!--快进按钮-->
|
||||
<!-- <image src="/static/kj.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kj()"></image> -->
|
||||
<!--快进按钮-->
|
||||
|
||||
<!--下一首切换按钮-->
|
||||
<!-- <image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
|
||||
mode="aspectFill"> </image> -->
|
||||
<!-- <image class="nextMusic" style="" src="/static/xys.png" @click="nextMusic" mode="aspectFill"></image> -->
|
||||
<!-- <u-icon name="arrow-right" color="#61e781" size="28" v-if="!showBig" @click="changeShow"></u-icon> -->
|
||||
<u-icon name="close" color="#61e781" size="20" style="background-color: #fff;border-radius: 100%;" v-if="!showBig" @click="closePlayer"></u-icon>
|
||||
<!-- 播放目录 -->
|
||||
<!-- <image src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill"></image> -->
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-100"></view>
|
||||
<!--占位-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
name:"music",
|
||||
props:{
|
||||
playData:{
|
||||
type:Object,
|
||||
default:()=>({})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showBig:false, // 显示详细模式
|
||||
muteBgMusic:true,
|
||||
fengImg:'',
|
||||
libLIst:[], // 播放目录
|
||||
playIndex: 0,// 播放器index
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.$music.playBgm({mute:false})
|
||||
|
||||
},
|
||||
created() {
|
||||
// this.fengImg = this.$music.getCoverImg()
|
||||
this.fengImg = this.userInfo.fengImg
|
||||
// this.libLIst = this.$music.getLibList()
|
||||
this.libLIst = this.userInfo.myList
|
||||
// console.log(this.userInfo.playIndex,'this.userInfo.playIndex')
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
...mapMutations(['setUserInfo']),
|
||||
|
||||
closePlayer(){
|
||||
// 关闭播放器
|
||||
// console.log('点击了关闭按钮')
|
||||
this.$music.setCloseBgm() // 关闭音频
|
||||
uni.setStorage({
|
||||
key: 'playVisible',
|
||||
data: false,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
this.setUserInfo({'playVisible':false})
|
||||
},
|
||||
changeShow(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/listen/bigListen'
|
||||
})
|
||||
// this.showBig = !this.showBig
|
||||
},
|
||||
// 上一首
|
||||
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()
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
...mapState(['userInfo']),
|
||||
timer() {
|
||||
return calcTimer(this.userInfo.currentTime)
|
||||
},
|
||||
overTimer() {
|
||||
return calcTimer(this.userInfo.duration)
|
||||
},
|
||||
playStatus(){
|
||||
var playFlag = false
|
||||
this.userInfo.playFlag !== undefined ? playFlag = this.userInfo.playFlag : ''
|
||||
console.log(playFlag,'playFlag')
|
||||
return playFlag
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
playData(newVal, oldVal){
|
||||
console.log(newVal,'组件获取到新值')
|
||||
if(newVal.myList.length > 0){
|
||||
this.setUserInfo({'playIndex': 0})
|
||||
this.$music.setList(newVal.myList,'autoPlay')
|
||||
// this.fengImg = newVal.fengImg
|
||||
|
||||
// 本地存储播放列表
|
||||
uni.setStorage({
|
||||
key: 'playData',
|
||||
data: newVal,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
// 系统暂存
|
||||
this.setUserInfo({'myList':newVal.myList})
|
||||
|
||||
|
||||
this.libLIst = newVal.myList
|
||||
// console.log(newVal.myList,'newVal.myList')
|
||||
uni.showToast({
|
||||
title:'添加列表成功',
|
||||
icon:'success',
|
||||
duration:2000
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'添加列表失败',
|
||||
icon:'error',
|
||||
duration:2000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//时间换算
|
||||
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>
|
||||
|
||||
.fengImg{ border-radius: 100%; }
|
||||
@-webkit-keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.leveOne{padding: 0 20rpx; }
|
||||
.playList{ width: calc(100% - 250rpx); height: 300rpx; overflow-y: scroll;}
|
||||
.playList .item{line-height:80rpx; white-space: nowrap;
|
||||
overflow-x: hidden; font-size: 38rpx;
|
||||
text-overflow: ellipsis;}
|
||||
.playNow{color: #27b386;}
|
||||
.flexbox{display: flex; }
|
||||
.miniMode{width:160px; padding-left: -20px; border-radius: 100rpx 0 0 100rpx; padding-top: 0rpx;
|
||||
height: 140rpx;
|
||||
border: 1px solid #eee;
|
||||
.closeBtn{border: 1px solid #666; display: inline-block; padding: 3px;}
|
||||
.leveOne{display: none;}
|
||||
.prevMusic{ display: none;
|
||||
width:30rpx;height:30rpx;transform:rotate(180deg)
|
||||
}
|
||||
.plays{width:50rpx;height:50rpx; margin-left: 0 !important;}
|
||||
.nextMusic{width:50rpx;height:50rpx; display: none;}
|
||||
}
|
||||
|
||||
.fuchuang{position: fixed; padding-right: 10px; padding-left: 0; bottom:120rpx; right:0; z-index: 888; background-color:rgba(255, 255, 255, 1); }
|
||||
.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;
|
||||
}
|
||||
.playNow{color: #27b386;}
|
||||
.fengmianBox{text-align: center; margin-top:50rpx;
|
||||
.times{ }
|
||||
}
|
||||
|
||||
.fengmianBox .defaultBg{ margin: 0 auto;border-radius: 200rpx; margin: 0 auto;
|
||||
margin-bottom: 20rpx; background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
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: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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>
|
||||
100
components/textScroll/index.vue
Normal file
100
components/textScroll/index.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="tip">
|
||||
<div class="inner" :class="{'move': scroll}" :style="styleName">
|
||||
<text :style="myStyle" class="tip-inder">{{text}} {{scroll ? text : '' }}</text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
defualt: ''
|
||||
},
|
||||
myStyle:{
|
||||
type:String,
|
||||
defualt:''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
styleName: "animation-duration: 6s",
|
||||
scroll: false,
|
||||
tipWidth: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
text: {
|
||||
handler(val) {
|
||||
this.textScroll()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textScroll() {
|
||||
// 等待节点挂载后再执行,热门线路tip滚动实现
|
||||
this.$nextTick(() => {
|
||||
let query = wx.createSelectorQuery().in(this)
|
||||
query.select('.tip').boundingClientRect(data => {
|
||||
this.tipWidth = data.width
|
||||
// console.log('tip', this.tipWidth)
|
||||
}).exec();
|
||||
query.select('.tip-inder').boundingClientRect(data => {
|
||||
if(data.width > this.tipWidth) {
|
||||
let w = Number(data.width)
|
||||
let time = Math.round(w / 40)
|
||||
this.styleName = `animation-duration: ${time}s`
|
||||
this.scroll = true
|
||||
}
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.tip { text-align: center;
|
||||
width: 100%;
|
||||
// background: #f6f9ff;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tip .inner {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tip .inner .tip-inder {
|
||||
white-space: nowrap;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.tip .inner.move {
|
||||
// animation: move 6s infinite linear;
|
||||
animation-name: scroll;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user