uniapp 播放音频

最新推荐文章于 2025-04-10 15:47:38 发布

一杯雾

最新推荐文章于 2025-04-10 15:47:38 发布

阅读量1.3w

点赞数 5

分类专栏：微信小程序 vue uniapp 文章标签： javascript 前端

原文链接：php.cn/uni-app/482179.html

版权

uniapp 同时被 3 个专栏收录

11 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

本文介绍了在uni-app中实现h5、安卓及小程序跨平台音频播放的策略。首先尝试使用uniapp自带的audio组件，发现在安卓上无法运行，之后通过使用createInnerAudioContext解决了安卓小程序的音频播放问题，但iOS的兼容性尚未测试。在main.js中定义全局方法ScanAudio，创建并播放音频，同时监听播放结束事件。在页面中根据需求调用此方法来播放语音提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：https://www.php.cn/uni-app/482179.html

目前，项目需求为h5内嵌安卓与ios 还有小程序
考虑到对于这几个平台的兼容性
先使用uniapp自带的audio 发现小程序可以正常运行
安卓不可以运行
后来使用createInnerAudioContext 是可以的
安卓小程序完美解决 ios 还没有测试如果ios有问题的话后面再更新

uni-app播放音频的方法：1、在main.js中引入“Vue.prototype.ScanAudio = function() {…}”；2、通过“this.ScanAudio();”方式在页面中调用即可。

Vue.prototype.ScanAudio = function() {

    var music = null;

    music = uni.createInnerAudioContext(); //创建播放器对象

    music.src = "../../static/mp3/fy-cn.mp3";

    music.play(); //执行播放

    music.onEnded(() => {

        //播放结束

        music = null;

    });}

页面中调用

//这里接口需要请求，判断是否需要播放语音提示

this.ScanAudio();//播放语音