此处 用的是小程序创建 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
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论