uni-app 【报Bug】uni.createInnerAudioContext() 某些服务MP3资源安卓无法播放

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 【报Bug】uni.createInnerAudioContext() 某些服务MP3资源安卓无法播放

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
产品分类:uniapp/App

PC开发环境操作系统:Windows

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

HBuilderX类型:正式

HBuilderX版本号:3.4.7

手机系统:Android

手机系统版本号:Android 7.1.1

手机厂商:小米

手机机型:MI6

页面类型:vue

vue版本:vue2

打包方式:云端

项目创建方式:HBuilderX

示例代码:

```html
<template>  
<view class="imt-audio">  
<view class="audio-wrapper">  
<view class="audio-control-wrapper">  
<view class="audio-control audio-control-switch" :class="{audioLoading:loading}"  
style="{borderColor:color}" [@click](/user/click)="audio.paused?play():audio.pause()">
            {{loading?'':(paused?'':'')}}</view>
        </view>
        <view style="display: flex;width: 100%;align-items: center;">
            <view class="audio-number">{{format(current)}}</view>
            <slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration"
                @changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)">
            </slider>
            <view class="audio-number">{{format(duration)}}</view>
        </view>
    </view>
</view>
</template>  
<script>
export default {
data() {
return {
audio: uni.createInnerAudioContext(),
current: 0, //当前进度(s)
duration: 0, //总时长(s)
paused: true, //是否处于暂停状态
loading: false, //是否处于读取状态
seek: false //是否处于拖动状态
}
},
props: {
src: String, //音频链接
autoplay: Boolean, //是否自动播放
continue: Boolean, //播放完成后是否继续播放下一首,需定义[@next](/user/next)事件
control: {
type: Boolean,
default: true
}, //是否需要上一曲/下一曲按钮
color: {
type: String,
default: '#FFCB00'
} //主色调
},
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)
},
//点击播放按钮
play() {
this.audio.play()
this.loading = true
}
},
created() {
if (this.src) {
this.audio.src = this.src
this.autoplay && this.play()
}
try{
this.audio.obeyMuteSwitch = false
}catch(e){
//TODO handle the exception
}  
//音频进度更新事件  
this.audio.onTimeUpdate(() => {  
console.info(this.seek,this.paused,this.current,this.audio.currentTime)  
if (!this.seek) {  
this.current = this.audio.currentTime  
}  
if (!this.duration) {  
this.duration = this.audio.duration  
}  
})  
//音频播放事件  
this.audio.onPlay(() => {  
console.info(this.paused,this.loading )  
this.paused = false  
this.loading = false  
})  
//音频暂停事件  
this.audio.onPause(() => {  
console.info(this.paused)  
this.paused = true  
})  
this.audio.onError((res) => {  
  console.log(res.errMsg);  
  console.log(res.errCode);  
})  
//音频结束事件  
this.audio.onEnded(() => {  
console.info(this.continue)  
//this.audio.destroy()  
if (this.continue) {  
this.next()  
} else {  
this.paused = true  
this.current = 0  
}  
})  
//音频完成更改进度事件  
this.audio.onSeeked(() => {  
console.info(222)  
this.seek = false  
})  
},
beforeDestroy() {
this.audio.destroy()  
},
watch: {
src(src, old) {
console.info(src, old)  
this.audio.src = 'http://tbvideo.ixiaochuan.cn/zyad/07/a0/78ac-c7e0-11e8-8d60-00163e00c638' //'http://tbvideo.ixiaochuan.cn/zyad/07/a0/78ac-c7e0-11e8-8d60-00163e00c638'//http://tbvideo.ixiaochuan.cn/zyad/07/a0/78ac-c7e0-11e8-8d60-00163e00c638    //'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3' //src  
this.current = 0  
this.duration = 0  
if (old || this.autoplay) {  
this.play()  
}  
}
}
}
</script>
[@font-face](/user/font-face) {
font-family: 'icon';
src: url('https://at.alicdn.com/t/font_1104838_fxzimc34xw.eot');
src: url('https://at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),
url('https://at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');
}

.imt-audio {  

}
.audio-wrapper {
display: flex;
/* justify-content: space-between; */
align-items: center;
}

.audio-number {
width: 120rpx;
font-size: 24rpx;
line-height: 1;
color: #FFFFFF;
text-align: center;
}

.audio-slider {
flex: 1;
margin: 0;
}

.audio-control-wrapper {
display: flex;
justify-content: center;
align-items: center;
font-family: "icon" !important;
}

.audio-control {
font-size: 32rpx;
line-height: 1;
border: 4rpx solid;
border-radius: 50%;
padding: 16rpx;
}

.audio-control-next {
transform: rotate(180deg);
}

.audio-control-switch {
font-size: 40rpx;
margin: 0 10rpx;
}

.audioLoading {
animation: loading 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

[@keyframes](/user/keyframes) loading {
to {
transform: rotate(360deg);
}
}

操作步骤:

预期结果:

实际结果:

bug描述:

使用官方提供的MP3资源地址播放没有问题。 另外我在网上找到有些资源播放也没有问题(http://tbvideo.ixiaochuan.cn/zyad/07/a0/78ac-c7e0-11e8-8d60-00163e00c638

使用自有服务或者其他MP3资源地址无法播放(http://sxl-nft-test.oss-cn-hangzhou.aliyuncs.com/demo/demo.mp3)。没有报错,总时长可以获取到,但是播放时一直在零点几秒处无限循环跳动

十分郁闷,为什么有的资源播放没问题,有的就播放不了(错误回调未执行),播放时间永远到不了1秒


1 回复

uni.createInnerAudioContext() 是 uni-app 提供的一个用于播放音频的 API。在某些情况下,可能会遇到某些 MP3 资源在安卓设备上无法播放的问题。以下是一些可能的原因和解决方案:

1. 音频格式或编码问题

  • 原因:某些 MP3 文件可能使用了不兼容的编码格式或比特率,导致在安卓设备上无法播放。
  • 解决方案:尝试将 MP3 文件转换为其他格式(如 AAC 或 WAV),或者使用不同的编码参数重新编码 MP3 文件。

2. 音频文件损坏

  • 原因:MP3 文件可能损坏或不完整,导致无法播放。
  • 解决方案:检查 MP3 文件是否完整,尝试重新下载或获取文件。

3. 网络问题

  • 原因:如果音频文件是通过网络加载的,可能会因为网络问题导致无法播放。
  • 解决方案:确保网络连接正常,或者尝试将音频文件下载到本地进行播放。

4. 跨域问题

  • 原因:如果音频文件是从其他域名加载的,可能会遇到跨域问题。
  • 解决方案:确保服务器配置了正确的 CORS 头,或者将音频文件放在同一域名下。

5. 安卓系统兼容性问题

  • 原因:某些安卓设备或系统版本可能存在兼容性问题。
  • 解决方案:尝试在不同的安卓设备或系统版本上测试,或者使用其他音频播放 API(如 uni.createAudioContext())。

6. uni-app 版本问题

  • 原因:某些 uni-app 版本可能存在 bug 或兼容性问题。
  • 解决方案:确保使用的是最新版本的 uni-app,或者尝试降级到已知稳定的版本。

7. 代码问题

  • 原因:代码中可能存在错误,导致音频无法正常播放。

  • 解决方案:检查代码逻辑,确保正确使用了 uni.createInnerAudioContext() API。例如:

    const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.src = 'https://example.com/audio.mp3';
    innerAudioContext.play();

8. 权限问题

  • 原因:安卓设备可能需要特定的权限才能播放音频。

  • 解决方案:确保在 manifest.json 中配置了必要的权限,例如:

    {
      "permission": {
        "android.permission.INTERNET": {}
      }
    }

9. 调试和日志

  • 原因:缺乏调试信息,难以定位问题。

  • 解决方案:在代码中添加日志,检查音频播放的状态和错误信息。例如:

    innerAudioContext.onPlay(() => {
      console.log('开始播放');
    });
    
    innerAudioContext.onError((err) => {
      console.error('播放错误', err);
    });
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!