devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：正经夜光杯 | 2024-08-23 06:39:24

赞

踩

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

目录

1.wxml文件

2.js文件

        1.获取文件数据流

        2.播放音频

        3.暂停音频

        4.停止音频

        5.退出页面时清除缓存

        6.js文件代码整合

1.wxml文件

  1. <!-- 在你的页面的 WXML 文件中 -->
  2.  
  3. <view>
  4.   <button bindtap="playAudio">播放音频</button>
  5.   <button bindtap="pauseAudio">暂停音频</button>
  6.   <button bindtap="stopAudio">停止音频</button>
  7. </view>

2.js文件

        1.获取文件数据流
  1.   onLoad(options) {
  2.     this.audioContext = wx.createInnerAudioContext();
  3.       wx.request({
  4.         url: '*******************',//后端获取音频的接口
  5.         method: 'POST',
  6.         responseType: 'arraybuffer',
  7.         success: (res) => {
  8.           if (res.statusCode === 200) {
  9.             // 处理音频文件流
  10.             this.saveAudioFile(res.data);
  11.           } else {
  12.             console.error('Failed to fetch audio file:', res.errMsg);
  13.           }
  14.         },
  15.         fail: function (err) {
  16.           console.error('Request failed:', err);
  17.         }
  18.       });
  19.     )
  20.     .catch(error => {
  21.       console.error('Failed to get token:', error);
  22.     });
  23.   },
  24.   saveAudioFile(arrayBuffer) {
  25.     const fs = wx.getFileSystemManager();
  26.     const filePath = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置文件保存路径
  27.     
  28.     // 直接将 ArrayBuffer 传递给 fs.writeFile
  29.     fs.writeFile({
  30.       filePath: filePath,
  31.       data: arrayBuffer, // 直接使用 ArrayBuffer
  32.       encoding: 'binary', // 指定编码方式
  33.       success: function () {
  34.         console.log('Audio file saved successfully:', filePath);
  35.       },
  36.       fail: function (err) {
  37.         console.error('Failed to save audio file:', err);
  38.       }
  39.     });
  40.   },
        2.播放音频
  1.     /**
  2.    * 播放音频
  3.    */
  4.   playAudio() {
  5.     this.audioContext.src = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置音频源为本地文件路径
  6.     this.audioContext.play();
  7.   },
        3.暂停音频
  1.     /**
  2.    * 暂停音频
  3.    */
  4.   pauseAudio() {
  5.       this.audioContext.pause();
  6.   },
        4.停止音频
  1.   /**
  2.    * 停止音频
  3.    */
  4.   stopAudio() {
  5.       this.audioContext.stop();
  6.   },
        5.退出页面时清除缓存
  1.  
  2.  
  3.   /**
  4.    * 生命周期函数--监听页面卸载
  5.    */
  6.   onUnload() {
  7.     // 页面卸载时停止音频播放并销毁音频上下文
  8.     console.log('页面卸载，停止音频并销毁音频上下文');
  9.     this.audioContext.stop();
  10.     this.audioContext.destroy();
  11.     // 获取文件系统管理器
  12.     const fs = wx.getFileSystemManager();
  13.  
  14.     // 要删除的文件路径
  15.     const filePath = `${wx.env.USER_DATA_PATH}/audio-file.mp3`;
  16.  
  17.     // 删除文件
  18.     fs.unlink({
  19.       filePath,
  20.       success() {
  21.         console.log('文件删除成功');
  22.       },
  23.       fail(err) {
  24.         console.error('文件删除失败', err);
  25.       }
  26.     });
  27.   },
        6.js文件代码整合
  1. // pages/list/list.js
  2. const app=getApp()
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     audioContext:null,
  10.   },
  11.  
  12.   /**
  13.    * 生命周期函数--监听页面加载
  14.    */
  15.   
  16.   onLoad(options) {
  17.     this.audioContext = wx.createInnerAudioContext();
  18.       wx.request({
  19.         url: '**************',//后端获取音频接口
  20.         method: 'POST',
  21.         responseType: 'arraybuffer',
  22.         success: (res) => {
  23.           if (res.statusCode === 200) {
  24.             // 处理音频文件流
  25.             this.saveAudioFile(res.data);
  26.           } else {
  27.             console.error('Failed to fetch audio file:', res.errMsg);
  28.           }
  29.         },
  30.         fail: function (err) {
  31.           console.error('Request failed:', err);
  32.         }
  33.       });
  34.     )
  35.     .catch(error => {
  36.       console.error('Failed to get token:', error);
  37.     });
  38.   },
  39.  
  40.   /**
  41.    * 生命周期函数--监听页面初次渲染完成
  42.    */
  43.   onReady() {
  44.  
  45.   },
  46.  
  47.   /**
  48.    * 生命周期函数--监听页面显示
  49.    */
  50.   onShow() {
  51.  
  52.   },
  53.  
  54.   /**
  55.    * 生命周期函数--监听页面隐藏
  56.    */
  57.   onHide() {
  58.  
  59.   },
  60.  
  61.   /**
  62.    * 生命周期函数--监听页面卸载
  63.    */
  64.   onUnload() {
  65.     // 页面卸载时停止音频播放并销毁音频上下文
  66.     console.log('页面卸载，停止音频并销毁音频上下文');
  67.     this.audioContext.stop();
  68.     this.audioContext.destroy();
  69.     // 获取文件系统管理器
  70.     const fs = wx.getFileSystemManager();
  71.  
  72.     // 要删除的文件路径
  73.     const filePath = `${wx.env.USER_DATA_PATH}/audio-file.mp3`;
  74.  
  75.     // 删除文件
  76.     fs.unlink({
  77.       filePath,
  78.       success() {
  79.         console.log('文件删除成功');
  80.       },
  81.       fail(err) {
  82.         console.error('文件删除失败', err);
  83.       }
  84.     });
  85.   },
  86.  
  87.   /**
  88.    * 页面相关事件处理函数--监听用户下拉动作
  89.    */
  90.   onPullDownRefresh() {
  91.  
  92.   },
  93.  
  94.   /**
  95.    * 页面上拉触底事件的处理函数
  96.    */
  97.   onReachBottom() {
  98.  
  99.   },
  100.  
  101.   /**
  102.    * 用户点击右上角分享
  103.    */
  104.   onShareAppMessage() {
  105.  
  106.   },
  107.   saveAudioFile(arrayBuffer) {
  108.     const fs = wx.getFileSystemManager();
  109.     const filePath = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置文件保存路径
  110.     
  111.     // 直接将 ArrayBuffer 传递给 fs.writeFile
  112.     fs.writeFile({
  113.       filePath: filePath,
  114.       data: arrayBuffer, // 直接使用 ArrayBuffer
  115.       encoding: 'binary', // 指定编码方式
  116.       success: function () {
  117.         console.log('Audio file saved successfully:', filePath);
  118.       },
  119.       fail: function (err) {
  120.         console.error('Failed to save audio file:', err);
  121.       }
  122.     });
  123.   },
  124.     /**
  125.    * 播放音频
  126.    */
  127.   playAudio() {
  128.     this.audioContext.src = wx.env.USER_DATA_PATH + '/audio-file.mp3'; // 设置音频源为本地文件路径
  129.     this.audioContext.play();
  130.   },
  131.     /**
  132.    * 暂停音频
  133.    */
  134.   pauseAudio() {
  135.       this.audioContext.pause();
  136.   },
  137.  
  138.   /**
  139.    * 停止音频
  140.    */
  141.   stopAudio() {
  142.       this.audioContext.stop();
  143.   },
  144. })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/1019871
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号