uni-app lime-audio-player 音频播放插件 - 陌上华年 接口返回二进制流需持续播放

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

uni-app lime-audio-player 音频播放插件 - 陌上华年 接口返回二进制流需持续播放

能否播放二进制流文件类似PC端

const chunkSize = Math.min(32000, audioBuffer.length);
const chunk = audioBuffer.slice(0, chunkSize);
audioBuffer = audioBuffer.slice(chunkSize);

const audioBufferSource = audioContext.createBuffer(1, chunk.length / 2, 16000);  
const channelData = audioBufferSource.getChannelData(0);  
const view = new DataView(chunk.buffer);  
for (let i = 0; i < channelData.length; i++) {  
    channelData[i] = view.getInt16(i * 2, true) / 32768.0;  
}  

const source = audioContext.createBufferSource();  
source.buffer = audioBufferSource;  
source.connect(audioContext.destination);  

const duration = audioBufferSource.duration;  
source.start(nextPlayTime);

Harmonyos Next教程
1 回复

在 uni-app 中使用 lime-audio-player 插件播放接口返回的二进制音频流，可以通过将二进制流转换为 Blob 对象，再将其 URL 传递给音频播放器来实现持续播放。以下是一个具体的代码示例，展示了如何实现这一功能。

首先，确保你已经安装了 lime-audio-player 插件。如果还没有安装，可以通过以下命令安装：

npm install @dcloudio/uni-ui

并在页面的 script 部分引入该组件：

import LimeAudioPlayer from '@dcloudio/uni-ui/lib/lime-audio-player/lime-audio-player.vue';

接下来，是具体的实现步骤：

  1. 请求音频二进制流：

使用 uni.request 请求音频二进制流，并处理响应数据。

export default {
  components: {
    LimeAudioPlayer
  },
  data() {
    return {
      audioSrc: '' // 存储音频的 URL
    };
  },
  methods: {
    fetchAudioStream() {
      uni.request({
        url: 'YOUR_AUDIO_STREAM_URL', // 替换为你的音频流接口
        method: 'GET',
        responseType: 'arraybuffer', // 指定返回类型为二进制数据
        success: (res) => {
          const arrayBuffer = res.data;
          const blob = new Blob([arrayBuffer], { type: 'audio/mpeg' }); // 假设音频格式为 MP3
          this.audioSrc = URL.createObjectURL(blob); // 创建 Blob URL
          this.playAudio(); // 开始播放
        },
        fail: (err) => {
          console.error('Failed to fetch audio stream:', err);
        }
      });
    },
    playAudio() {
      this.$refs.audioPlayer.play(); // 假设 LimeAudioPlayer 组件的 ref 为 audioPlayer
    }
  },
  mounted() {
    this.fetchAudioStream(); // 组件挂载后请求音频流
  }
};
  1. 模板中使用 LimeAudioPlayer：
<template>
  <view>
    <lime-audio-player ref="audioPlayer" :src="audioSrc" controls></lime-audio-player>
  </view>
</template>

在上述代码中，fetchAudioStream 方法请求音频二进制流，并将其转换为 Blob 对象，然后生成一个可以供 lime-audio-player 使用的 URL。一旦获取到 URL，就将其赋值给 audioSrc，并调用 playAudio 方法开始播放。

注意，这里假设音频流的格式是 MP3 (audio/mpeg)，如果实际格式不同，需要相应地调整 Blob 对象的 type 属性。

这种方法可以实现接口返回二进制流的持续播放，适用于需要实时或按需获取音频内容的应用场景。

回到顶部