3 回复
8年原生技术开发,熟练安卓、IOS各类uniapp混合插件开发,联系QQ: 1328559667
有一个办法,使用一个video来播放音频,并设置样式把video移出屏幕外,
<video
style=“position: fixed;top: -100vh;left: -200vw;”
id=“myVideo”
src=“https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3”
@error=“videoErrorCallback”
enable-danmu
danmu-btn
controls
这样就能和uni.createInnerAudioContext 一起使用了
在 uni-app
中实现同时播放两段音频的功能,虽然原生的小程序框架(如微信小程序)对音频播放有一定的限制,但通过一些技巧和使用第三方库,我们仍然可以实现这一需求。以下是一个基本的示例,展示如何在 uni-app
中使用 HTML5+ Audio
对象来实现同时播放两段音频。
首先,确保你的项目配置支持 HTML5+ API。在 manifest.json
中,确保 mp-weixin
(或其他平台)的配置项中包含对 HTML5+ API 的支持(这通常是默认的)。
接下来,在页面的脚本部分,你可以使用以下代码来创建并控制两个音频对象:
// pages/index/index.vue
<template>
<view>
<button @click="playAudio1">播放音频1</button>
<button @click="playAudio2">播放音频2</button>
<button @click="stopAllAudio">停止所有音频</button>
</view>
</template>
<script>
export default {
data() {
return {
audio1: null,
audio2: null,
};
},
methods: {
createAudio(src) {
const audio = new plus.audio.Audio(src);
audio.play();
return audio;
},
playAudio1() {
this.audio1 = this.createAudio('_www/audio1.mp3'); // 替换为你的音频路径
},
playAudio2() {
this.audio2 = this.createAudio('_www/audio2.mp3'); // 替换为你的音频路径
},
stopAllAudio() {
if (this.audio1) {
this.audio1.stop();
this.audio1 = null;
}
if (this.audio2) {
this.audio2.stop();
this.audio2 = null;
}
},
},
};
</script>
<style scoped>
/* 你的样式 */
</style>
注意事项:
- 路径
_www/audio1.mp3
和_www/audio2.mp3
需要替换为你实际的音频文件路径。 - 这种方法依赖于 HTML5+ API,因此仅适用于支持该 API 的平台,如 5+ App(包括 Android 和 iOS 的原生应用),对于小程序平台(如微信小程序),需要采用其他方式(如使用 Web Audio API 或第三方库)。
- 由于 HTML5+ API 在小程序中可能不受支持,如果你需要在小程序中实现类似功能,可能需要考虑使用服务端转发音频流或使用 WebSocket 来传输音频数据,但这通常更复杂且性能开销较大。
以上代码提供了一个基本的框架,你可以根据需要进行扩展和修改。