uni-app 微信小程序 音频自定义播放器

在uni-app中实现微信小程序自定义音频播放器，你可以利用微信小程序的innerAudioContext API进行音频播放控制，并结合uni-app的组件和样式来自定义播放器的外观。以下是一个简单的示例，展示如何创建一个基本的自定义音频播放器。

1. 创建组件

首先，在你的uni-app项目中创建一个新的组件，比如AudioPlayer.vue，用于自定义音频播放器。

<template>
  <view class="audio-player">
    <button @click="playAudio">{{isPlaying ? '暂停' : '播放'}}</button>
    <slider v-model="currentTime" :min="0" :max="duration" disabled @change="seekTo"></slider>
    <text>{{formatTime(currentTime)}} / {{formatTime(duration)}}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      innerAudioContext: wx.createInnerAudioContext(),
      src: 'https://example.com/audio.mp3', // 替换为你的音频URL
      isPlaying: false,
      currentTime: 0,
      duration: 0
    };
  },
  mounted() {
    this.innerAudioContext.src = this.src;
    this.innerAudioContext.onTimeUpdate(() => {
      this.currentTime = this.innerAudioContext.currentTime;
      this.duration = this.innerAudioContext.duration;
    });
  },
  methods: {
    playAudio() {
      if (this.isPlaying) {
        this.innerAudioContext.pause();
      } else {
        this.innerAudioContext.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    seekTo(e) {
      this.innerAudioContext.currentTime = e.detail.value;
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
  }
};
</script>

<style>
.audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
}
button {
  margin: 10px 0;
}
slider {
  width: 80%;
}
</style>

2. 使用组件

在你的页面中使用这个自定义音频播放器组件。例如，在pages/index/index.vue中：

<template>
  <view>
    <AudioPlayer />
  </view>
</template>

<script>
import AudioPlayer from '@/components/AudioPlayer.vue';

export default {
  components: {
    AudioPlayer
  }
};
</script>

总结

这个示例展示了如何在uni-app中为微信小程序创建一个基本的自定义音频播放器。你可以根据需要进一步扩展功能，比如添加音量控制、进度条样式优化等。记得将音频URL替换为你自己的音频文件地址。