详细问题描述
使用audio做音频播放器,涉及到多音频切换播放。
1、onSeeked事件一直不触发,在调用seek方法后,onSeeking是一直触发的,onSeeked事件一直不触发,导致我不能正确切换seek状态。
2、初始化播放时,onWaiting事件不触发,但是onTimeUpdate事件触发,当执行seek方法后,onTimeUpdate事件永不触发。
3、切换播放器时必须执行audio.stop方法,执行后,onTimeUpdate事件不触发。
[内容]
重现步骤
[步骤]
1、onSeeked事件一直不触发,在调用seek方法后,onSeeking是一直触发的,onSeeked事件一直不触发,导致我不能正确切换seek状态。
2、初始化播放时,onWaiting事件不触发,但是onTimeUpdate事件触发,当执行seek方法后,onTimeUpdate事件永不触发。
3、切换播放器时必须执行audio.stop方法,执行后,onTimeUpdate事件不触发。
[结果]
1、onSeeked事件一直不触发,在调用seek方法后,onSeeking是一直触发的,onSeeked事件一直不触发,导致我不能正确切换seek状态。
2、初始化播放时,onWaiting事件不触发,但是onTimeUpdate事件触发,当执行seek方法后,onTimeUpdate事件永不触发。
3、切换播放器时必须执行audio.stop方法,执行后,onTimeUpdate事件不触发。
[期望]
1、执行seek方法后,seeking触发,seeking后应该执行seeked事件。
2、seek方法后,onTimeUpdate事件应该继续触发
3、应该继续触发
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HbuilderX 2.2.2。20190816
[IDE版本号]
[windows版本号]
win10
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序?]
app
[运行端版本号]
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件模式
App运行环境说明
[Android版本号]
[iOS版本号]
[手机型号]
荣耀20
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
<template>
<view class="imt-audio">
<view class="audio-wrapper">
<view class="audio-number">{{currentTime}}</view>
<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
@change="change"></slider>
<view class="audio-number">{{durationTime}}</view>
</view>
<view class="audio-control-wrapper" :style="{color:color}">
<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">
<text class="lg cuIcon-backwardfill"></text>
</view>
<view class="audio-control audio-control-switch" :class="{audioLoading:loading}" :style="{borderColor:color}" @click="operation">
<text v-show="loading" class="lg cuIcon-loading2"></text>
<text v-show="!loading && paused" class="lg cuIcon-playfill"></text>
<text v-show="!loading && !paused" class="lg cuIcon-ellipse"></text>
</view>
<view class="audio-control" v-if="control" :style="{borderColor:color}" @click="next">
<text class="lg cuIcon-play_forward_fill"></text>
</view>
</view>
</view>
</template>
<script>
var audio =null;
export default {
data() {
return {
currentTime: '', //当前播放时间
durationTime: '', //总时长
current: '', //slider当前进度
loading: false, //是否处于读取状态
paused: true, //是否处于暂停状态
seek: false ,//是否处于拖动状态
audio:null
}
},
props: {
src: String, //音频链接
autoplay: Boolean, //是否自动播放
duration: Number, //总时长(单位:s)
control: {
type:Boolean,
default:true
}, //是否需要上一曲/下一曲按钮
continue:Boolean,//播放完成后是否继续播放下一首,需定义@next事件
color: {
type:String,
default:'#169af3'
} //主色调
},
created:function(){
audio = uni.createInnerAudioContext();
console.log("录音组件初始化。。。");
audio.src = this.src;
this.current = 0;
this.durationTime = this.format(this.duration);
audio.obeyMuteSwitch = false;
//音频播放事件
audio.onPlay(() => {
console.log("开始播放了...")
this.paused = false
this.loading = false
})
//音频暂停事件
audio.onPause(() => {
this.paused = true
})
//音频进度更新事件
audio.onTimeUpdate(() => {
console.log("音频进度事件...")
if (!this.seek) {
this.current = audio.currentTime
}
if(this.loading){
this.loading=false;
}
})
audio.onWaiting(()=>{
console.log("开始缓冲...")
this.loading=true;
})
//音频结束事件
audio.onEnded(() => {
if (this.continue) {
this.next()
} else {
this.paused = true
this.current = 0
}
})
audio.onSeeking(()=>{
console.log("seeking...");
console.log("audio: " + JSON.stringify(audio));
})
//音频完成更改进度事件
audio.onSeeked(()=>{
console.log("更改进度完成")
this.seek = false
this.loading=false;
/* let that = this;
audio.offTimeUpdate(()=>{
console.log("取消进度事件")
audio.onTimeUpdate(()=>{
console.log("重新添加监听事件")
})
}) */
})
},
beforeDestroy:function(){
audio.destroy();
},
methods: {
//返回prev事件
prev() {
this.$emit('prev')
},
//返回next事件
next() {
this.$emit('next')
},
//格式化时长
format(num) {
return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(
Math.floor(num % 60)).length) + Math.floor(num % 60)
},
//播放/暂停操作
operation() {
if (this.paused) {
audio.play()
this.loading = true
} else {
audio.pause()
}
},
//完成拖动事件
change(e) {
audio.seek(e.detail.value)
}
},
watch: {
//监听音频地址更改
src(e) {
console.log("切换播放地址为"+e);
audio.stop();
this.loading = true
this.current = 0
setTimeout(function(){
audio.src = e
audio.play();
},1000)
},
//监听总时长改变
duration(e) {
this.durationTime = this.format(e)
},
//监听当前进度改变
current(e) {
this.currentTime = this.format(e)
}
}
}
</script>
<style>
@font-face {
font-family: 'icon';
src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot');
src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');
}
.imt-audio {
padding: 30upx;
background: #fff;
border-radius: 20upx;
}
.audio-wrapper {
display: flex;
align-items: center;
}
.audio-number {
font-size: 24upx;
line-height: 1;
color: #333;
}
.audio-slider {
flex: 1;
margin: 0 30upx;
}
.audio-control-wrapper {
margin-top: 20upx;
display: flex;
justify-content: center;
align-items: center;
font-family: "icon" !important;
}
.audio-control {
font-size: 32upx;
line-height: 1;
border: 4upx solid;
border-radius: 50%;
padding: 16upx;
}
.audio-control-next {
transform: rotate(180deg);
}
.audio-control-switch {
font-size: 40upx;
margin: 0 80upx;
}
.audioLoading {
animation: loading 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}
</style>
联系方式
[QQ]
javatong (作者)
目前还没有测试其他机型
2019-09-24 15:13
2***@qq.com
回复 javatong: 我在安卓机上测试,.onTimeUpdate只执行一次,后续改变音频不会执行此方法
2019-11-14 17:03
2***@qq.com
我在安卓机上测试,.onTimeUpdate只执行一次,后续改变音频不会执行此方法
2019-11-14 17:03
2***@qq.com
回复 2***@qq.com: 我的也是
2019-11-19 10:24