微信小程序从后端获取音频数据流并播放

浮休383

已于 2025-02-27 16:04:31 修改

阅读量1k

点赞数 1

文章标签：微信小程序音视频小程序

于 2024-08-21 16:46:11 首次发布

本文链接：https://blog.csdn.net/qq_55946937/article/details/141397325

版权

1.wxml文件

<!-- 在你的页面的 WXML 文件中 -->

<view>
  <button bindtap="playAudio">播放音频</button>
  <button bindtap="pauseAudio">暂停音频</button>
  <button bindtap="stopAudio">停止音频</button>
</view>

2.js文件

1.获取文件数据流

  onLoad(options) {
    this.audioContext = wx.createInnerAudioContext();
      wx.request({
        url: '*******************',//后端获取音频的接口
        method: 'POST',
        responseType: 'arraybuffer',
        success: (res) => {
          if (res.statusCode === 200) {
            // 处理音频文件流
            this.saveAudioFile(res.data);
          } else {
            console.error('Failed to fetch audio file:', res.errMsg);
          }
        },
        fail: function (err) {
          console.error('Request failed:', err);
        }
      });
    )
    .catch(error => {
      console.error('Failed to get token:', error);
    });
  },
  saveAudioFile(arrayBuffer) {
    const fs = wx.getFileSystemManager();
    const filePath = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置文件保存路径
    
    // 直接将 ArrayBuffer 传递给 fs.writeFile
    fs.writeFile({
      filePath: filePath,
      data: arrayBuffer, // 直接使用 ArrayBuffer
      encoding: 'binary', // 指定编码方式
      success: function () {
        console.log('Audio file saved successfully:', filePath);
      },
      fail: function (err) {
        console.error('Failed to save audio file:', err);
      }
    });
  },

2.播放音频

    /**
   * 播放音频
   */
  playAudio() {
    this.audioContext.src = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置音频源为本地文件路径
    this.audioContext.play();
  },

3.暂停音频

    /**
   * 暂停音频
   */
  pauseAudio() {
      this.audioContext.pause();
  },

4.停止音频

  /**
   * 停止音频
   */
  stopAudio() {
      this.audioContext.stop();
  },

5.退出页面时清除缓存



  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    // 页面卸载时停止音频播放并销毁音频上下文
    console.log('页面卸载，停止音频并销毁音频上下文');
    this.audioContext.stop();
    this.audioContext.destroy();
    // 获取文件系统管理器
    const fs = wx.getFileSystemManager();

    // 要删除的文件路径
    const filePath = `${wx.env.USER_DATA_PATH}/audio-file.mp3`;

    // 删除文件
    fs.unlink({
      filePath,
      success() {
        console.log('文件删除成功');
      },
      fail(err) {
        console.error('文件删除失败', err);
      }
    });
  },

6.js文件代码整合

// pages/list/list.js
const app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    audioContext:null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  
  onLoad(options) {
    this.audioContext = wx.createInnerAudioContext();
      wx.request({
        url: '**************',//后端获取音频接口
        method: 'POST',
        responseType: 'arraybuffer',
        success: (res) => {
          if (res.statusCode === 200) {
            // 处理音频文件流
            this.saveAudioFile(res.data);
          } else {
            console.error('Failed to fetch audio file:', res.errMsg);
          }
        },
        fail: function (err) {
          console.error('Request failed:', err);
        }
      });
    )
    .catch(error => {
      console.error('Failed to get token:', error);
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    // 页面卸载时停止音频播放并销毁音频上下文
    console.log('页面卸载，停止音频并销毁音频上下文');
    this.audioContext.stop();
    this.audioContext.destroy();
    // 获取文件系统管理器
    const fs = wx.getFileSystemManager();

    // 要删除的文件路径
    const filePath = `${wx.env.USER_DATA_PATH}/audio-file.mp3`;

    // 删除文件
    fs.unlink({
      filePath,
      success() {
        console.log('文件删除成功');
      },
      fail(err) {
        console.error('文件删除失败', err);
      }
    });
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  saveAudioFile(arrayBuffer) {
    const fs = wx.getFileSystemManager();
    const filePath = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置文件保存路径
    
    // 直接将 ArrayBuffer 传递给 fs.writeFile
    fs.writeFile({
      filePath: filePath,
      data: arrayBuffer, // 直接使用 ArrayBuffer
      encoding: 'binary', // 指定编码方式
      success: function () {
        console.log('Audio file saved successfully:', filePath);
      },
      fail: function (err) {
        console.error('Failed to save audio file:', err);
      }
    });
  },
    /**
   * 播放音频
   */
  playAudio() {
    this.audioContext.src = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置音频源为本地文件路径
    this.audioContext.play();
  },
    /**
   * 暂停音频
   */
  pauseAudio() {
      this.audioContext.pause();
  },

  /**
   * 停止音频
   */
  stopAudio() {
      this.audioContext.stop();
  },
})

7.存在问题：

不断播放获取的音频是同一段录音，在排除后端返回音频错误的情况下，给保存文件的路径加上时间戳

    const filePath = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置文件保存路径
          this.audioContext.src = wx.env.USER_DATA_PATH + '/audio-file'+this.data.timestamp+'.mp3'; // 设置音频源为本地文件路径

改为

const filePath = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置文件保存路径
          this.audioContext.src = wx.env.USER_DATA_PATH + '/audio-file'+this.data.timestamp+'.mp3'; // 设置音频源为本地文件路径

data增加参数timestamp
  data: {
    jqToken:'',
    sentences:[],
    dataList: [
    ],
    timestamp:'',
  },

在saveAudioFile(arrayBuffer)中一开始就给timestamp赋值

  saveAudioFile(arrayBuffer) {
    const fs = wx.getFileSystemManager();
    this.setData({
      timestamp:new Date().getTime()
    })
    const filePath = wx.env.USER_DATA_PATH + '/audio-file'+this.data.timestamp+'.mp3'; // 设置文件保存路径}