Jiang731619
Jiang731619
  • 发布:2024-05-17 16:12
  • 更新:2024-05-17 16:12
  • 阅读:40

【报Bug】uni.createInnerAudioContext()在老一点的设备上无法播放(安卓5.1)

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 4.15

浏览器平台: 手机系统浏览器

浏览器版本: -

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://www.zyftwl.com/test/#/pages/API/inner-audio/inner-audio

示例代码:

<template>
<view class="uni-padding-wrap">
<page-head title="audio"></page-head>
<view class="uni-common-mt">
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</view>
<!-- <view class="uni-common-mt play-time-area">
<text class="current-time">{{currentTime}}</text>
<text class="duration">{{duration}}</text>
</view> -->
<view class="play-button-area">
<image class="icon-play" :src="playImage" @click="play"></image>
</view>
</view>
</template>
<script>
const audioUrl = '/static/music.mp3'
export default {
data() {
return {
title: "innerAudioContext",
isPlaying: false,
isPlayEnd: false,
currentTime: 0,
duration: 100
}
},
computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
playImage() {
return this.isPlaying ? "/static/pause.png" : "/static/play.png"
}
},
onLoad() {
this._isChanging = false;
this._audioContext = null;
this.createAudio();
},
onUnload() {
if (this._audioContext != null && this.isPlaying) {
this.stop();
}
},
methods: {
createAudio() {
var innerAudioContext = this._audioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
innerAudioContext.src = audioUrl;
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onTimeUpdate((e) => {
if (this._isChanging === true) {
return;
}
this.currentTime = innerAudioContext.currentTime || 0;
this.duration = innerAudioContext.duration || 0;
});
innerAudioContext.onEnded(() => {
this.currentTime = 0;
this.isPlaying = false;
this.isPlayEnd = true;
});
innerAudioContext.onError((res) => {
this.isPlaying = false;
console.log(res.errMsg);
console.log(res.errCode);
});
return innerAudioContext;
},
onchanging() {
this._isChanging = true;
},
onchange(e) {
console.log(e.detail.value);
console.log(typeof e.detail.value);
this._audioContext.seek(e.detail.value);
this._isChanging = false;
},
play() {
if (this.isPlaying) {
this.pause();
return;
}
this.isPlaying = true;
this._audioContext.play();
this.isPlayEnd = false;
},
pause() {
this._audioContext.pause();
this.isPlaying = false;
},
stop() {
this._audioContext.stop();
this.isPlaying = false;
}
}
}
</script>
<style>
.play-time-area {
display: flex;
flex-direction: row;
margin-top: 20px;
}

.duration {  
    margin-left: auto;  
}  

.play-button-area {  
    display: flex;  
    flex-direction: row;  
    justify-content: center;  
    margin-top: 50px;  
}  

.icon-play {  
    width: 60px;  
    height: 60px;  
}  

</style>

操作步骤:

..

预期结果:

..

实际结果:

..

bug描述:

下载uniapp 官方示例项目hello uniapp 发布成网页后在我的设备(安卓5.1)浏览器里面createInnerAudioContext无法播放,但直接访问官方的地址就能播放(地址:https://hellouniapp.dcloud.net.cn/pages/API/inner-audio/inner-audio)

2024-05-17 16:12 负责人:无 分享
已邀请:

要回复问题请先登录注册