欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序播放文件流音频

程序员文章站 2022-03-11 23:21:49
此处 用的是小程序创建 innerAudioContext , 因为创建innerAudioContext 的src 属性的值, 只能是本地路径 或 在线地址 , 所以后台返回的文件流数据没有作用 .而且小程序是没有办法像js一样将文件流数据 , 利用blob URL.createobjecturl 来进行 对 innerAudioContext.src 来进行赋值 , 所以我们要将文件流下载下来 (wx.downloadFile) , 用本地路径来 对 src 赋值以下是 代码 可以直接复制 ,...

此处 用的是小程序创建 innerAudioContext , 因为创建innerAudioContext 的src 属性的值, 只能是本地路径 或 在线地址 , 所以后台返回的文件流数据没有作用 .
而且小程序是没有办法像js一样将文件流数据 , 利用blob URL.createobjecturl 来进行 对 innerAudioContext.src 来进行赋值 , 所以我们要将文件流下载下来 (wx.downloadFile) , 用本地路径来 对 src 赋值
以下是 代码 可以直接复制 ,

注意点:
1 . 前端 , 后端都要设置 header 中 ‘Content-type’: ‘audio/mp3’ !!! 后端不设置 , 前端可以 撂挑子 不干活了 ,
2. 安卓是将文件下载下来 , 用本地路径对 src 赋值 , 但是 ios 不行 , ios可以直接赋值 文件流

在这里插入代码片  , vant组件库
只看逻辑就好 , 这里代码很垃圾 , 项目很坑 , 我也不想重写了
// 下载接口
 downLoadUrl() {
    let self = this
    return new Promise(resolve => {
      wx.downloadFile({
      // 接口 + 语音id
        url: self.data.downloadMp3 + self.data.audioSrc,
        header: {
          'Content-type': 'audio/mp3' // 注意前端 后端 都要设置Content-type , 
        },
        success(res) {
		// 到这还是临时文件 , 临时路径.
		// 将文件保存本地
          wx.saveFile({
            tempFilePath: res.tempFilePath,
            success(res) {
              const savedFilePath = res.savedFilePath
              self.setData({
                abc: fasle// 节流
              })
              resolve(
                savedFilePath
              )
            }
          })
        }    
      })
    })
  },

  // 音频播放
  async bofang(e) {
    const { system } = wx.getSystemInfoSync()  // 系统信息
    var self = this
    let audioSrc = e.currentTarget.dataset.voice;  // 语音id

    // 获取倒计时实例
    let countDown = this.selectComponent('.control-count-down1' + audioSrc); // 播放的语音倒计时
    let countDown1 = this.selectComponent('.control-count-down1' + this.data.src); // 上一条倒计时实例

    self.setData({
      countDown, // 存到全局
      audioSrc
    })
    // 下载语音 节流
    if (self.data.abc) {
      // 判断 机型
      if (system.toLocaleLowerCase().includes('ios')) {
       // 苹果 就直接 赋值 接口
        self.setData({
          downLoadAudio: self.data.downloadMp3 + self.data.audioSrc
        })
      } else {
      // 安卓就 赋值 本地地址
        let res = await self.downLoadUrl()
        self.setData({
          downLoadAudio: res
        })
      }
    }

    if (this.data.videoImgSrc != audioSrc) {
      // 当前播放语音不是上一条就 重置定时器 , 并重新下载语音
      if (this.data.src && this.data.src != audioSrc) {
        this.data.innerAudioContext.src = ''
        countDown1.reset()
        // 判断 机型
        if (system.toLocaleLowerCase().includes('ios')) {
        // 苹果直接赋值 接口
          self.setData({
            downLoadAudio: self.data.downloadMp3 + self.data.audioSrc
          })
        } else {
        // 安卓赋值 本地路径
          let res = await self.downLoadUrl()
          self.setData({
            downLoadAudio: res
          })
        }
      }

      this.data.innerAudioContext.src = self.data.downLoadAudio
      if(this.data.innerAudioContext.src) {
      // 这个 if 主要是因为 苹果会有一个下载过程 , 可能会慢一会 , 所以判断当src有值的情况下 在播放
        this.data.innerAudioContext.play();
        self.setData({
          videoImgSrc: audioSrc, // 控制播放图标
          src: audioSrc  // 记录语音是那一条
        })
        console.log('倒计时实例', countDown)
        countDown.start();
      }
     

    } else {
	//  倒计时, 语音暂停
      countDown.pause()
      this.data.innerAudioContext.pause();
      this.setData({
        videoImgSrc: '',
        // src: audioSrc
      })
      return
    }

  },

本文地址:https://blog.csdn.net/ss043500/article/details/107421823

相关标签: 微信小程序部分