uni-app中uni.createInnerAudioContext()创建音频对象赋值给ref对象后，调用play方法在微信小程序无法播放。

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

uni-app中uni.createInnerAudioContext()创建音频对象赋值给ref对象后，调用play方法在微信小程序无法播放。

产品分类：

uniapp/小程序/微信

项目信息 详情
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.24
第三方开发者工具版本号 1.06.2405020
基础库版本号 3.5.8
项目创建方式 HBuilderX

示例代码：

<template>  
  <view class="content flex">  
    <button class="btn type-1" @click="clickTab1">按钮1</button>  
    <button class="btn type-1" @click="clickTab2">按钮2</button>  
  </view>  
</template>  

<script setup>  
import { ref } from 'vue'  
const audio = uni.createInnerAudioContext()  
audio.src = 'https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3'  

const clickTab1 = () => {  
    audio.play()  
}  

const audioRef = ref(null)  
audioRef.value = uni.createInnerAudioContext()  
audioRef.value.src = 'https://www.cambridgeenglish.org/images/153149-movers-sample-listening-test-vol2.mp3'  

const clickTab2 = () => {  
    audioRef.value.play()  
}  
</script>

操作步骤：

在微信小程序中，分别点击按钮1，按钮2

预期结果：

都可以正常播放音频

实际结果：

按钮1可以播放，按钮2播放失败。

bug描述：

uni.createInnerAudioContext()创建音频对象赋值给ref对象，调用play方法在微信小程序无法播放。但在H5中可以正常播放。


Harmonyos Next教程
5 回复

你好，我这里经过测试是可以正常播放的，但是你给出的音频链接，我这里显示请求超时
用的是这个：https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3，测试是正常的可以播放


你用的小程序基础库是哪个，我本地 3.5.8不行

而且上传发版之后都不行

本地2.21.1的基础库可以，但是上传发版后怎么解决呢？

在uni-app中，使用uni.createInnerAudioContext()创建音频对象并赋值给Vue的ref对象后，若在微信小程序中调用play方法无法播放，通常可能是由几个常见原因引起的。以下是一些排查步骤和示例代码，帮助你解决这个问题。

1. 确保正确创建和赋值音频上下文

首先，确保你正确创建了音频上下文，并将其赋值给了Vue的ref对象。以下是一个示例：

<template>
  <view>
    <button @click="playAudio">播放音频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioCtx: null,
    };
  },
  mounted() {
    this.audioCtx = uni.createInnerAudioContext();
    this.$refs.audioRef = this.audioCtx; // 赋值给ref对象
    this.audioCtx.src = 'https://example.com/your-audio-file.mp3'; // 设置音频源
  },
  methods: {
    playAudio() {
      this.$refs.audioRef.play();
    },
  },
};
</script>

2. 检查音频源URL

确保音频源的URL是有效的，并且支持在微信小程序中播放。微信小程序对音频文件的格式和来源有一定的限制。

3. 调试和错误处理

添加错误处理逻辑来捕获可能的播放错误：

methods: {
  playAudio() {
    this.$refs.audioRef.onError((err) => {
      console.error('音频播放错误:', err);
    });
    this.$refs.audioRef.play();
  },
},

4. 权限和网络状态

检查微信小程序的权限设置，确保有权限播放音频。同时，确保设备处于联网状态，并且音频URL可访问。

5. 异步加载问题

如果音频文件较大或网络较慢，可能需要等待音频加载完成后再播放。你可以监听canplay事件：

mounted() {
  this.audioCtx = uni.createInnerAudioContext();
  this.$refs.audioRef = this.audioCtx;
  this.audioCtx.src = 'https://example.com/your-audio-file.mp3';
  this.audioCtx.onCanplay(() => {
    console.log('音频已加载，可以播放');
  });
},

6. 使用官方示例测试

如果以上步骤都未能解决问题，建议使用微信小程序的官方音频播放示例进行测试，以排除代码逻辑问题。

通过上述步骤，你应该能够定位并解决在微信小程序中使用uni.createInnerAudioContext()播放音频时遇到的问题。如果问题依旧存在，可能需要进一步检查uni-app的文档或向官方社区寻求帮助。

回到顶部