uni-app 无法播放本地音频

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

uni-app 无法播放本地音频

开发环境 版本号 项目创建方式
Mac 14.6.1 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：Android

手机系统版本号：Android 10

手机厂商：杂牌

手机机型：pad

页面类型：vue

vue版本：vue3

打包方式：离线

示例代码：

plus.android.requestPermissions(
["android.permission.READ_EXTERNAL_STORAGE", "android.permission.WRITE_EXTERNAL_STORAGE"],
function (result) { 
    let filePath  = plus.io.convertLocalFileSystemURL(`/storage/76FB-CFA0/oyuuntApp/1/1/1_1t.mp3`)  
    let fs = plus.io.resolveLocalFileSystemURL;  
    fs(filePath, function(entry) {  
        // 如果成功获取了文件入口，那么文件存在  
        console.log("文件存在: " + filePath);  

        const innerAudioContext = uni.createInnerAudioContext();  
        innerAudioContext.autoplay = true;  
        innerAudioContext.src = filePath;  
        innerAudioContext.onPlay(() => {  
          console.log('开始播放');  
        });  
        innerAudioContext.onError((res) => {  
          console.log(res.errMsg);  
          console.log(res.errCode);  
        });  

    }, function(error) {  
        // 如果发生错误，通常意味着文件不存在  
        console.error("文件不存在或无法访问: " + filePath);  
    });  

    console.log("权限申请结果:", result);  
},  
function (error) {  
    console.error("权限申请失败:", error);  
}  
);

操作步骤：

plus.android.requestPermissions(
["android.permission.READ_EXTERNAL_STORAGE", "android.permission.WRITE_EXTERNAL_STORAGE"],
function (result) { 
    let filePath  = plus.io.convertLocalFileSystemURL(`/storage/76FB-CFA0/oyuuntApp/1/1/1_1t.mp3`)  
    let fs = plus.io.resolveLocalFileSystemURL;  
    fs(filePath, function(entry) {  
        // 如果成功获取了文件入口，那么文件存在  
        console.log("文件存在: " + filePath);  

        const innerAudioContext = uni.createInnerAudioContext();  
        innerAudioContext.autoplay = true;  
        innerAudioContext.src = filePath;  
        innerAudioContext.onPlay(() => {  
          console.log('开始播放');  
        });  
        innerAudioContext.onError((res) => {  
          console.log(res.errMsg);  
          console.log(res.errCode);  
        });  

    }, function(error) {  
        // 如果发生错误，通常意味着文件不存在  
        console.error("文件不存在或无法访问: " + filePath);  
    });  

    console.log("权限申请结果:", result);  
},  
function (error) {  
    console.error("权限申请失败:", error);  
}  
);

预期结果：

播放音频

实际结果：

12:06:54.388 权限申请结果:,  [Object] {"granted":["android.permission.READ_EXTERNAL_STORAGE","android.permission.WRITE_EXTERNAL_S...} at pages/index/index.vue:254
12:06:54.406 文件存在: /storage/76FB-CFA0/oyuuntApp/1/1/1_1t.mp3 at pages/index/index.vue:234
12:06:54.473 MediaError at pages/index/index.vue:244
12:06:54.473 [Number] -5  at pages/index/index.vue:245

bug描述：

播放sd卡里的音频不行，可是同目录的图片就能正常显示呢


Harmonyos Next教程
1 回复

在使用 uni-app 开发应用时，如果遇到无法播放本地音频的问题，通常可以通过以下方式解决。这里提供一个基本的示例代码，展示如何在 uni-app 中播放本地音频。

首先，确保你的项目中已经包含了音频文件，并且这些文件被正确地放置在了项目的资源目录中。例如，你可以将音频文件放在 static 文件夹下。

接下来，你可以使用 uni-app 提供的 API 来播放音频。uni-app 提供了 InnerAudioContext 对象，用于管理音频的播放。

以下是一个简单的示例代码，展示如何在页面加载时播放本地音频：

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

<script>
export default {
  data() {
    return {
      innerAudioContext: null
    };
  },
  onLoad() {
    // 创建 InnerAudioContext 实例
    this.innerAudioContext = uni.createInnerAudioContext();
    // 设置音频文件的路径，这里假设音频文件名为 'audio.mp3'，并放在 static 文件夹下
    this.innerAudioContext.src = '/static/audio.mp3';
  },
  methods: {
    playAudio() {
      // 播放音频
      this.innerAudioContext.play();
    }
  },
  onUnload() {
    // 页面卸载时销毁 InnerAudioContext 实例，释放资源
    if (this.innerAudioContext) {
      this.innerAudioContext.destroy();
      this.innerAudioContext = null;
    }
  }
};
</script>

<style>
/* 样式可以根据需要自定义 */
</style>

在这个示例中，我们首先在 onLoad 生命周期函数中创建了 InnerAudioContext 实例，并设置了音频文件的路径。然后，在 playAudio 方法中调用 play 方法来播放音频。在页面卸载时，我们销毁了 InnerAudioContext 实例，以释放资源。

如果你遇到无法播放的问题，请检查以下几点：

  1. 确保音频文件的路径正确。
  2. 确保音频文件的格式被支持（如 mp3、wav 等）。
  3. 检查是否有其他错误或警告信息在控制台输出，这些信息可能会提供解决问题的线索。
  4. 如果你在真机上测试，确保真机支持该音频格式。

通过以上步骤，你应该能够在 uni-app 中成功播放本地音频。如果问题仍然存在，请检查 uni-app 的官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。

回到顶部