uni-app 有没有大佬做能同时播放两段音频的插件啊

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

uni-app 有没有大佬做能同时播放两段音频的插件啊

就是同时播放两个音频

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>

注意事项:

  1. 路径 _www/audio1.mp3_www/audio2.mp3 需要替换为你实际的音频文件路径。
  2. 这种方法依赖于 HTML5+ API,因此仅适用于支持该 API 的平台,如 5+ App(包括 Android 和 iOS 的原生应用),对于小程序平台(如微信小程序),需要采用其他方式(如使用 Web Audio API 或第三方库)。
  3. 由于 HTML5+ API 在小程序中可能不受支持,如果你需要在小程序中实现类似功能,可能需要考虑使用服务端转发音频流或使用 WebSocket 来传输音频数据,但这通常更复杂且性能开销较大。

以上代码提供了一个基本的框架,你可以根据需要进行扩展和修改。

回到顶部