uni-app 背景音和音频API 加上倍速功能

在uni-app中实现背景音和音频播放，并添加倍速功能，你可以利用uni-app提供的音频管理API。以下是一个基本的代码示例，展示了如何实现这些功能。

首先，在pages/index/index.vue文件中，你可以按照以下步骤进行：

1. 引入必要的API：

   const innerAudioContext = uni.createInnerAudioContext();
   

2. 设置音频源和初始化：

   data() {
       return {
           audioSrc: 'https://example.com/your-audio-file.mp3', // 替换为你的音频URL
           playStatus: false, // 播放状态
           playSpeed: 1.0 // 倍速，默认1.0倍速
       };
   },
   onLoad() {
       innerAudioContext.src = this.audioSrc;
       innerAudioContext.onPlay(() => {
           this.playStatus = true;
       });
       innerAudioContext.onPause() {
           this.playStatus = false;
       });
       innerAudioContext.onEnded(() => {
           this.playStatus = false;
       });
   }
   

3. 播放/暂停功能：

   methods: {
       togglePlay() {
           if (this.playStatus) {
               innerAudioContext.pause();
           } else {
               innerAudioContext.play();
           }
       }
   }
   

4. 倍速功能：

   methods: {
       setPlaySpeed(speed) {
           if (speed > 0 && speed <= 8) { // 限制倍速范围在0到8倍之间
               this.playSpeed = speed;
               innerAudioContext.playbackRate = speed;
           } else {
               console.error('Invalid play speed');
           }
       },
       increaseSpeed() {
           this.setPlaySpeed(this.playSpeed + 0.25);
       },
       decreaseSpeed() {
           this.setPlaySpeed(this.playSpeed - 0.25);
       }
   }
   

5. 模板部分：

   <template>
       <view>
           <button @click="togglePlay">{{ playStatus ? 'Pause' : 'Play' }}</button>
           <button @click="increaseSpeed">Increase Speed</button>
           <button @click="decreaseSpeed">Decrease Speed</button>
           <text>Current Speed: {{ playSpeed }}</text>
       </view>
   </template>
   

在这个示例中，我们创建了一个innerAudioContext对象来管理音频播放。通过uni.createInnerAudioContext()方法，我们可以控制音频的播放、暂停、倍速等功能。通过绑定按钮的点击事件，我们可以切换播放状态、增加或减少播放速度，并在界面上显示当前的播放速度和状态。

请注意，以上代码是一个基本示例，实际项目中可能需要更多的错误处理和边界情况处理。另外，由于uni-app支持多端运行，你还需要确保音频URL在不同平台上的有效性。