直接创建个uniapp项目,把我的代码放进去,运行到模拟器
![1***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/c046ef5fa04c155833b88f04e80bfe27.png)
- 发布:2021-01-08 09:33
- 更新:2021-01-08 09:37
- 阅读:2014
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window 10
HBuilderX类型: 正式
HBuilderX版本号: 2.9.8
手机系统: Android
手机系统版本号: Android 10
手机厂商: 模拟器
手机机型: LIO-AN00
页面类型: vue
打包方式: 离线
项目创建方式: HBuilderX
操作步骤:
预期结果:
销毁后,重新实例化能播放
销毁后,重新实例化能播放
实际结果:
销毁后,重新实例化后不能播放,没有触发onPlay
销毁后,重新实例化后不能播放,没有触发onPlay
bug描述:
我在onShow第一次实例,基本都可以播放,偶尔不能播放
在删除后,再实例,基本都不可以播放,偶尔可以播放
打印出来,都有实例了,但就是没有触发Onplay()
打印结果如下:
{
"id": "16100165043940.1966609937842998",
"_callbacks": {
"canplay": [],
"play": ["function() { [native code] }"],
"pause": ["function() { [native code] }"],
"stop": [],
"ended": ["function() { [native code] }"],
"timeupdate": ["function() { [native code] }"],
"error": [],
"waiting": [],
"seeking": [],
"seeked": []
},
"_options": {
"src": "http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D"
}
}
代码如下:
<template>
<view class="audio_page">
<view class="audio_txt">
<!-- 录制时间 -->
<view class="audio_time">
<view class="spot"></view>
<text class="time">{{voicePath==''?showRecordTime:soundTime}}</text>
</view>
<text class="btnDel" @click="discardFun">删除</text>
</view>
<view class="line_box_path" v-if="voicePath!=''">
<view class="line"></view>
<view class="line_view" :style="{'width':pathLineWdFun+'px'}">
<image src="@/static/post_message/blue_audio.png" class="line_audio"></image>
</view>
</view>
<view class="image img_start" v-if="time>0&&status==true" @click.stop="playFun()"></view>
<view class="image img_stop" v-if="time>0&&status==false" @click.stop="playFun()"></view>
</view>
</template>
<script>
var vue_this = null;
export default {
computed: {
// 动态计算已经录制的时间或者播放的录音的剩余时间
showRecordTime() {
if (this.time != 0) {
this.soundTime = this.formatFun(this.time);
this.durationTime = this.time.toString();
}
return this.formatFun(this.time);
},
pathLineWdFun() {
return this.pathLineWd;
},
},
data() {
return {
// 计算时间
time: 4,
// 播放路径
voicePath: 'http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D',
torch_point_id: '',
lineWd: 0,
status: true,
soundTime: '00:00',
durationTime: '0',
innerAudioContext: null,
currentTime: 0,
duration: 0,
pathLineWd: 0,
}
},
onLoad(e) {
vue_this = this;
},
onShow() {
this.innerAudioContext = uni.createInnerAudioContext();
this.onPlay();
this.onCanplay();
this.onTimeUpdate();
this.onEnded();
this.onPause();
},
onHide() {
console.log("onhide")
// this.is_save = false;
this.innerAudioContext.destroy();
this.innerAudioContext = null;
uni.hideLoading();
},
destroyed() {
console.log("destroyed")
// this.is_save = false;
this.innerAudioContext.destroy();
},
methods: {
discardFun() {
this.pathLineWd = 0;
this.stopFunNum = 0;
this.voicePath = '';
this.soundTime = '';
this.time = 4;
this.lineWd = 0;
this.innerAudioContext.destroy();
this.innerAudioContext = null;
this.innerAudioContext = uni.createInnerAudioContext();
this.onPlay();
this.onCanplay();
this.onTimeUpdate();
this.onEnded();
this.onPause();
this.status = true;
this.autoplay = false;
},
playFun() {
this.voicePath = 'http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D';
console.log("播放录音:", this.voicePath)
//播放录音
if (!this.voicePath) {
alert('音频文件空空如也,小主请先录音', "center");
return
}
// currentTime:当前播放时间 ,duration:录音总时长,单位;ms
this.status = false;
console.log("this.innerAudioContext:", this.innerAudioContext);
this.$nextTick(() => {
if (this.innerAudioContext == null) {
this.innerAudioContext = uni.createInnerAudioContext();
}
this.innerAudioContext.src = this.voicePath;
this.innerAudioContext.play();
console.log("打印:", this.innerAudioContext)
})
},
onCanplay() {
this.innerAudioContext.onCanplay((callback) => {
console.log("缓冲回调");
this.duration = this.innerAudioContext.duration;
})
},
onPlay() {
this.innerAudioContext.onPlay((callback) => {
console.log("播放回调");
})
},
onTimeUpdate() {
this.innerAudioContext.onTimeUpdate((callback) => {
this.currentTime = this.innerAudioContext.currentTime;
this.soundTime = this.formatFun(this.duration - this.currentTime);
let allwidth = 247;
let curWidth = (allwidth * this.currentTime) / this.duration;
console.log('duration:', this.duration, 'currentTime:', this.currentTime, 'curWidth:', curWidth)
this.pathLineWd = curWidth;
})
},
onEnded() {
this.innerAudioContext.onEnded((callback) => {
let allwidth = 247;
let curWidth = (allwidth * (this.duration - this.currentTime)) / this.duration;
this.pathLineWd = parseInt(this.pathLineWd += curWidth);
this.status = true;
});
},
onPause() {
this.innerAudioContext.onPause((callback) => {
this.status = true;
});
},
formatFun(time) {
var hh = parseInt(time / 3600);
if (hh < 10) hh = "0" + hh;
var mm = parseInt((time - hh * 3600) / 60);
if (mm < 10) mm = "0" + mm;
var ss = parseInt((time - hh * 3600) % 60);
if (ss < 10) ss = "0" + ss;
return mm + ':' + ss
},
stopFun() {
this.innerAudioContext.pause();
}
}
}
</script>
<style lang="scss" scoped>
.audio_page {
width: 100%;
height: 100vh;
box-sizing: border-box;
color: #fff;
background: #242533;
position: relative;
.image{
width: 100rpx;
height: 100rpx;
}
.img_start{
background-color: red;
}
.img_stop{
background-color: pink;
}
.line_box_path {
position: absolute;
overflow: hidden;
right: 20rpx;
// width: calc(100% - 120rpx);
width: 480rpx;
height: 60rpx;
top: 50%;
transform: translateY(-50%);
.line {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
// background: url(../../../static/post_message/white_audio.png) no-repeat center center;
// background-size: 100% 100%;
}
.line_view {
// width: 480rpx;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
overflow: hidden;
.line_audio {
width: 480rpx;
height: 100%;
/* background: url(../../../static/post_message/blue_audio.png) no-repeat right center;
background-size: 100% 100%; */
}
}
}
}
</style>
环境:app
1 个回复
1***@qq.com (作者)
修改为