<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
</view>
陌涵秋
- 发布：2024-09-13 15:09
- 更新：2024-10-11 15:48
- 阅读：139
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window11
HBuilderX类型： 正式
HBuilderX版本号： 4.24
浏览器平台： Chrome
浏览器版本： 128.0.6613.137
项目创建方式： HBuilderX
示例代码：
操作步骤：
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
</view>
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
</view>预期结果：
正常使用
正常使用
实际结果：
报错如图
报错如图
bug描述：
uni-admin项目，在引用audio组件时，会报错，导致哪怕因为其他第三方带有audio组件的库时如plyr，会优先走uni的库，导致无法使用
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
更新：
经过讨论，考虑到 uniapp 的跨平台，目前还是不推荐直接使用 audio 组件完成音频播放，暂不支持三方组件库使用 audio，建议通过 uni.createInnerAudioContext 完成音频播放操作，这样更具有跨平台兼容性。
后续会进一步优化，是否允许切换内置组件、原生标签。
n你可以通过下面的方案来绕过当前的限制，当前代码只能在 web 上运行，不能跨平台
<template>
<view class="content">
<div id='audio-div'></div>
</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路径。
