mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 09:26:45 +08:00
275 lines
6.5 KiB
Vue
275 lines
6.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="xaudio">
|
||
<view class="xaudio-image">
|
||
<image :src="require('./images/music.png')" mode="widthFix"></image>
|
||
</view>
|
||
<view class="xaudio-title">{{name}}</view>
|
||
<view class="xaudio-process">
|
||
<view class="xaudio-process-left">{{currentTime}}</view>
|
||
<view class="xaudio-process-slider">
|
||
<slider
|
||
class="audio-slider"
|
||
block-size="16"
|
||
:value="playDuration"
|
||
:max="duration"
|
||
@change="sliderChange"
|
||
:disabled="allowDrag">
|
||
</slider>
|
||
</view>
|
||
<view class="xaudio-process-right">{{allTime}}</view>
|
||
</view>
|
||
<view class="xaudio-control">
|
||
<!-- 块退15s -->
|
||
<image :src="require('./images/prev.png')" class="prevbtn" @click="stepPlay(-15)" mode="widthFix"></image>
|
||
<!--播放或暂停-->
|
||
<image class="btn-size" v-if="playing" @click="onPlayerPause()" src="../audio-player/images/pausebtn2.png"></image>
|
||
<image class="btn-size" v-else @click="onPlayerPlay()" src="../audio-player/images/playbtn2.png"></image>
|
||
<!-- 快进15s -->
|
||
<image :src="require('./images/next.png')" class="nextbtn" @click="stepPlay(15)" mode="widthFix"></image>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
props: {
|
||
src: {
|
||
type: String,
|
||
default:''
|
||
},
|
||
name:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
author:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
drag:{ //是否允许拖拽
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
initialTime: {
|
||
//默认播放的位置,第几秒
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
autoplay: {
|
||
// 是否自动播放
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
timeInterval: {
|
||
//快进快退间隔
|
||
type: Number,
|
||
default: 15,
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
audioContext:null,
|
||
playing:false,
|
||
allowDrag:false,
|
||
percentage: 0, // 音频进度百分比
|
||
currentTime: '00:00', // 音频当前播放时间
|
||
allTime: '00:00', // 音频总播放时间
|
||
playDuration:0,// 音频总播放秒数
|
||
duration:100,//总的播放时间
|
||
audioInterval: null, // 定时器
|
||
speed: 1,
|
||
muted: false, // 是否默认静音
|
||
currVolume: 50, // 当前音量
|
||
allowUpdate:true,
|
||
checkSecond:-1 //用于检查的秒数
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
mounted() {
|
||
this.audioContext = uni.createInnerAudioContext();
|
||
this.resetPlay();
|
||
},
|
||
beforeDestroy(){
|
||
this.audioContext.destroy();
|
||
},
|
||
watch:{
|
||
src(newVal,oldVal){
|
||
if(newVal!=oldVal){
|
||
if(newVal!=''){
|
||
this.resetPlay();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
resetPlay(){
|
||
//console.log('重新执行');
|
||
let $this=this;
|
||
this.allowDrag=!this.drag;
|
||
this.audioContext.autoplay = this.autoplay;
|
||
this.audioContext.src = this.src;
|
||
this.audioContext.onTimeUpdate(()=>{
|
||
$this.onPlayerPlaying();
|
||
});
|
||
this.audioContext.onCanplay(()=>{
|
||
//console.log('可以播放了');
|
||
$this.duration=$this.audioContext.duration;
|
||
//$this.currentTime=$this.formatSeconds(0);
|
||
$this.allTime=$this.formatSeconds($this.duration);
|
||
});
|
||
this.audioContext.onError((res) => {
|
||
console.log(res.errMsg);
|
||
console.log(res.errCode);
|
||
});
|
||
this.playing=false;
|
||
this.audioContext.seek(0);
|
||
//this.onPlayerPlay();
|
||
},
|
||
stepPlay(t){
|
||
this.allowUpdate=false;
|
||
let current=this.audioContext.currentTime;
|
||
let newTime=current+t;
|
||
this.audioContext.seek(newTime);
|
||
this.allowUpdate=true;
|
||
|
||
},
|
||
sliderChanging(e) {
|
||
//拖拽过程中，不允许更新进度条
|
||
//this.updateState= false;
|
||
this.allowUpdate=false;
|
||
this.audioContext.pause();
|
||
this.playing=false;
|
||
},
|
||
// 拖动slider完成后触发
|
||
sliderChange(e) {
|
||
//console.log(e,'e');
|
||
let second=e.detail.value;
|
||
this.audioContext.seek(second);
|
||
this.allowUpdate=true;
|
||
this.audioContext.play();
|
||
this.playing=true;
|
||
this.currentTime=this.formatSeconds(second);
|
||
// 重新计时
|
||
this.$emit("onPlay",this.audioContext);
|
||
},
|
||
onPlayerPlay(){
|
||
//console.log('开始播放');
|
||
this.allowUpdate=true;
|
||
//console.log(this.audioContext.duration,'this.audioContext.duration');
|
||
this.audioContext.play();
|
||
this.checkSecond=-1;//重置检查的秒数
|
||
this.playing=true;
|
||
this.$emit("onPlay",this.audioContext);
|
||
},
|
||
onPlayerPause(){
|
||
//console.log('暂停播放');
|
||
this.audioContext.pause();
|
||
this.playing=false;
|
||
this.$emit("onPause",this.audioContext);
|
||
},
|
||
onPlayerPlaying(){
|
||
//let total=this.audioContext.duration;
|
||
if(this.allowUpdate){
|
||
let current=this.audioContext.currentTime;
|
||
//this.playDuration=current*100/total;
|
||
this.playDuration=current;
|
||
//console.log(this.playDuration,'this.playDuration');
|
||
this.currentTime=this.formatSeconds(current);
|
||
//以下修改为1秒调用一次，减少调用次数
|
||
let intTime=parseInt(current);
|
||
if(intTime>this.checkSecond){
|
||
this.checkSecond=intTime;
|
||
this.$emit("onPlaying",this.audioContext,intTime);
|
||
}
|
||
// 相等的时候，关闭计时
|
||
if(this.currentTime == this.allTime){
|
||
//图标变换
|
||
this.onPlayerEnded()
|
||
}
|
||
}
|
||
},
|
||
onPlayerEnded(){
|
||
//console.log('结束播放');
|
||
this.audioContext.stop();
|
||
this.playing=false;
|
||
//let intTime=parseInt(e.detail.currentTime);
|
||
this.$emit("onEnded",this.audioContext);
|
||
},
|
||
formatSeconds(a) {
|
||
var hh = parseInt(a/3600);
|
||
var mm = parseInt((a-hh*3600)/60);
|
||
if(mm<10) mm = "0" + mm;
|
||
var ss = parseInt((a-hh*3600)%60);
|
||
if(ss<10) ss = "0" + ss;
|
||
if(hh<10) hh = hh == 0?'':`0${hh}:`;
|
||
var length = hh + mm + ":" + ss;
|
||
if(a>=0){
|
||
return length;
|
||
}else{
|
||
return "00:00";
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.prevbtn,
|
||
.nextbtn {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
.xaudio{
|
||
.xaudio-image{
|
||
text-align: center;
|
||
image{
|
||
width: 260rpx;
|
||
height: 260rpx;
|
||
}
|
||
}
|
||
.xaudio-title{
|
||
padding: 0 40upx;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
margin-top: 50rpx;
|
||
text-align: center;
|
||
word-break:break-all;
|
||
}
|
||
.btn-size{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
.xaudio-process{
|
||
display: flex;
|
||
align-items: center;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
.xaudio-process-left{
|
||
font-size: 24upx;
|
||
line-height: 1;
|
||
}
|
||
.xaudio-process-slider{
|
||
flex: 1;
|
||
}
|
||
.xaudio-process-right{
|
||
font-size: 24upx;
|
||
line-height: 1;
|
||
color: #333;
|
||
}
|
||
}
|
||
.xaudio-control{
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 40rpx auto 0;
|
||
justify-content: space-around;
|
||
height: 100rpx
|
||
|
||
|
||
}
|
||
}
|
||
</style> |