uni-app uni-admin引用audio组件后保存问题

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

uni-app uni-admin引用audio组件后保存问题

示例代码：

<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>

操作步骤：

<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>

预期结果：

正常使用

实际结果：

报错如图

bug描述：

uni-admin项目，在引用audio组件时，会报错，导致哪怕因为其他第三方带有audio组件的库时如plyr，会优先走uni的库，导致无法使用

Image


Harmonyos Next教程
3 回复

已确认是vue3的bug, 等待修复


更新： 经过讨论，考虑到 uniapp 的跨平台，目前还是不推荐直接使用 audio 组件完成音频播放，暂不支持三方组件库使用 audio，建议通过 uni.createInnerAudioContext 完成音频播放操作，这样更具有跨平台兼容性。
后续会进一步优化，是否允许切换内置组件、原生标签。
n你可以通过下面的方案来绕过当前的限制，当前代码只能在 web 上运行，不能跨平台
<template>
<view class="content">


</view>
</template>

<script> import Plyr from 'plyr'; import 'plyr/dist/plyr.css' import { nextTick } from 'vue'; export default { data() { return { title: 'Hello' } }, onReady(){ const audio = document.createElement('audio') video.id = 'player' const box = document.getElementById('audio-div') box.appendChild(audio) nextTick(() => { const player = new Plyr('#player'); }) }, methods: { } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } </style>

感谢反馈，audio 组件在 vue2 中视为内置组件，在 vue3 中发生了变化，这个调整在代码中没有及时同步产生了这个问题。
问题已定位修复，计划下次 alpha 版本生效，如果你希望在本地先绕过此问题，可以参考下面方案
临时解决方案 打开项目依赖，注意区分你是 cli 还是 HBuilderX，下载解压压缩包，里面包含两个压缩包，分别是 uni-shared-dist 和 uni-cli-shred-transforms

打开项目依赖定位到 uni-shared/dist/，使用 uni-shared-dist 内容进行替换
打开项目依赖定位到 uni-cli-shared/dist/vue/transforms 使用 uni-cli-shred-transforms 进行替换

如何找到项目依赖
vue3+cli 项目，请替换项目依赖 node_modules/@dcloudio/ vue3+HBuilderX 项目，找到HBuilderX的根目录，替换/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio
tip: 快速找到HBuilderX根目录的方式，帮助–>自述文件。 然后在右键选择 ，在外部资源管理器打开，即可打开HBuilderX路径。

在uni-app中引用audio组件并实现音频保存功能，通常涉及两个主要步骤：播放音频和处理音频文件的保存。uni-admin一般作为后端管理系统，与前端uni-app中的audio组件使用不直接相关，但我们可以假设你需要在前端处理音频的播放和保存。

以下是一个简化的代码示例，展示如何在uni-app中引用audio组件并实现音频保存功能。这里我们假设你已经有一个音频文件的URL，并且希望用户能够播放这个音频，并且有一个按钮可以将音频保存到本地。

  1. 在页面中引用audio组件
<template>
  <view>
    <audio :src="audioSrc" controls></audio>
    <button @click="saveAudio">保存音频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioSrc: 'https://example.com/path/to/your/audio.mp3' // 替换为你的音频文件URL
    };
  },
  methods: {
    saveAudio() {
      const that = this;
      uni.request({
        url: 'https://example.com/api/download-audio', // 你的后端下载接口
        method: 'GET',
        responseType: 'arraybuffer', // 关键：设置响应类型为arraybuffer
        success: (res) => {
          const arrayBuffer = res.data;
          const blob = new Blob([arrayBuffer], { type: 'audio/mpeg' }); // 根据音频格式设置type
          const url = URL.createObjectURL(blob);
          
          // 使用文件系统API保存文件（仅支持部分平台，如小程序）
          #ifdef MP-WEIXIN
          const fs = wx.getFileSystemManager();
          const filePath = `${wx.env.USER_DATA_PATH}/audio.mp3`;
          fs.writeFile({
            filePath,
            data: arrayBuffer,
            encoding: 'binary',
            success() {
              uni.showToast({ title: '音频保存成功' });
            },
            fail() {
              uni.showToast({ title: '音频保存失败', icon: 'none' });
            }
          });
          #endif
          
          // 对于不支持直接写文件的平台，可以考虑引导用户长按下载
          // 例如，创建一个a标签并模拟点击
          const a = document.createElement('a');
          a.href = url;
          a.download = 'audio.mp3';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url); // 释放内存
        },
        fail() {
          uni.showToast({ title: '音频下载失败', icon: 'none' });
        }
      });
    }
  }
};
</script>

注意：

  • 上面的代码示例使用了条件编译#ifdef MP-WEIXIN来处理微信小程序的文件保存逻辑，因为不同平台（如H5、App、小程序）的文件系统API可能有所不同。
  • 对于不支持直接文件写入的平台，我们创建了一个模拟下载的链接，引导用户长按下载。
  • responseType: 'arraybuffer'是确保我们能够获取到音频文件的二进制数据，这对于后续的保存操作至关重要。
回到顶部