uni-app使用 uni.createInnerAudioContext()音频播放api
前言
1.我这边主要是在微信小程序上使用所以我不太清楚到App或H上有没有问题,不过应该可以。
2.我这边只记录一下主要功能和方法。
3.本文主要做记录使用,有任何不对的地方请大佬指正。
效果图如下:
解读:
如图所示这是一个音频播放页面,基本功能如下:播放暂停,快进快退,文件切换,当前文件播放结束自动播放下一个文件。
正文:
1.播放样式(文件切换样式我就不放了,就放个进度条这个):
<view class="audio-container">
<view class="audio-play" @tap="changePlayState">//暂停和播放事件
<image class="image" :src="audioPlay ? '暂停图片' : '播放图片'"></image>
</view>
<view class="audio-slider">
<view class="audio-time">
<text>{{currentTimeStr}}</text>//进度时间
</view>
//min进度从0开始 sliderMax进度最大值 sliderChangeComplate快进快退事件 sliderValue播放进度
<slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
:value="sliderValue" activeColor="blue"></slider>
<view class="audio-time">
<text>{{timeStr}}</text>//总时间
</view>
</view>
</view>
2.创建实例
//录音实例
creatAudio() {
this.innerAudioContext = uni.createInnerAudioContext();//创建实例
this.innerAudioContext.autoplay = true;//设置是否自动播放
this.innerAudioContext.src = this.recordPath;//音频的url
this.innerAudioContext.onPlay(() => {
// 播放监听
console.log('播放!');
this.audioPlay = true;
});
this.innerAudioContext.onPause(() => {
// 暂停监听
console.log('暂停播放!');
this.audioPlay = false
});
this.innerAudioContext.onEnded(() => {
// 结束播放监听
console.log('播放结束!');
this.audioPlay=false;
//自动切换事件
this.qeihuanwenjian()
});
this.innerAudioContext.onTimeUpdate(() => {
const { currentTime,duration} = this.innerAudioContext;//这俩参数是这个api自带的参数
const currTimeStr = this.formatTime(currentTime);
this.sliderValue = parseInt(currentTime);
// 变动的时间
this.currentTimeStr = currTimeStr;
//进度条最大值
this.sliderMax = this.formatSecond(duration);
});
},
3.点击暂停播发事件
// 录音暂停播放
changePlayState() {
if (this.audioPlay == false) {
this.innerAudioContext.play();
} else {
this.innerAudioContext.pause()
}
},
4.快进快退
//音频前进回退
sliderChangeComplate(e) {
const currTimeStr = this.formatTime(e.detail.value)
this.currentTimeStr = currTimeStr
this.innerAudioContext.seek(e.detail.value);
this.innerAudioContext.play();
},
5.点击列表切换
// 文件切换播放
filechange(item, i) {
this.innerAudioContext.destroy()
this.csdFileindex=i;
this.recordPath = item.recordPath;
this.sliderMax = this.getTime(item.recordDuration);
this.timeStr = this.getTime(item.recordDuration);
this.creatAudio()
},
6.自动切换事件
// 自动播放下一个文件
qeihuanwenjian(){
let index=this.csdFileindex+1;
if(index<this.luyinList.length){
this.csdFileindex=index;
let item=this.luyinList[this.csdFileindex];
let i=this.csdFileindex;
this.filechange(item,i)
}
},
7.播放进度转换成时间 00:01 – 00:02 – 00:03…
formatTime(num) {
//格式化时间格式
num = num.toFixed(0);
let second = num % 60;
if (second < 10) second = '0' + second;
let min = Math.floor(num / 60);
if (min < 10) min = '0' + min;
return min + ":" + second;
},
8.转化总时长
/**
* 格式化时间
* @param {String} date 原始时间格式
* 格式后的时间:hh:mm:ss
**/
const formatSecond = seconds=> {
var h = Math.floor(seconds / 3600) < 10 ? '0'+Math.floor(seconds / 3600) : Math.floor(seconds / 3600);
var m = Math.floor((seconds / 60 % 60)) < 10 ? '0' + Math.floor((seconds / 60 % 60)) : Math.floor((seconds / 60 % 60));
var s = Math.floor((seconds % 60)) < 10 ? '0' + Math.floor((seconds % 60)) : Math.floor((seconds % 60));
return h + ":" + m + ":" + s;
}
结尾: 整体比较潦草就真的是简单记录下