效果图
实现
复制到.vue文件即可预览效果
<template>
<view class="container">
<view style="margin-bottom: 20px;">
<view class="audio-time">
<text>{{currentTimeStr}}</text><!-- 进度时间 -->
</view>
<u-slider v-model="sliderValue" min="0" :max="sliderMax" @change="sliderChangeComplate()"></u-slider>
<!-- 进度条 -->
<view class="audio-time">
<text>{{timeStr}}</text><!-- 总时间 -->
</view>
</view>
<u-button :text="btn_text" type="success" size="normal" @click="changePlayState()">
</u-button>
</view>
</template>
<script>
export default {
data() {
return {
btn_text: '播放语音',
timeStr: '00:00',
sliderValue: 0,
currentTimeStr: '00:00',
sliderMax: 0,
rePlay: false,
innerAudioContext: null,
audioPlay: false,
}
},
onLoad(options) {
this.creatAudio();
},
methods: {
// 录音实例-初始化
creatAudio() {
this.innerAudioContext = uni.createInnerAudioContext(); //创建实例
//this.innerAudioContext.autoplay = true;//设置是否自动播放
//this.innerAudioContext.src = ''; //音频的url
// 开始播放
this.innerAudioContext.onPlay(() => {
this.btn_text = '正在播放...';
this.audioPlay = true;
});
// 暂停播放
this.innerAudioContext.onPause(() => {
this.btn_text = '播放暂停';
this.audioPlay = false;
});
// 播放结束
this.innerAudioContext.onEnded(() => {
this.btn_text = '重新播放';
this.audioPlay = false;
this.rePlay = true;
this.innerAudioContext.stop();
});
// 停止播放
this.innerAudioContext.onStop(() => {
this.btn_text = '重新播放';
this.audioPlay = false;
this.rePlay = true;
});
// 播放错误
this.innerAudioContext.onError((res) => {
console.log("播放错误", res)
});
// 进度
this.timeUpdate();
},
// 播放时间进度
timeUpdate() {
this.sliderValue = 0;
this.currentTimeStr = '00:00';
this.sliderMax = 0;
this.timeStr = '00:00';
this.innerAudioContext.onTimeUpdate(() => {
const {
currentTime,
duration
} = this.innerAudioContext; //这俩参数是这个api自带的参数
// 实时进度
this.sliderValue = parseInt(currentTime);
// 变动的时间
this.currentTimeStr = this.formatTime(currentTime);
// 进度条最大值
this.sliderMax = parseInt(duration);
// 总时长
this.timeStr = this.formatTime(duration);
});
},
// 录音暂停播放
changePlayState() {
if (this.audioPlay == false) {
if (!this.innerAudioContext.src) {
this.innerAudioContext.src = getApp().globalData.imgUrl + "/upload/49/tem/1.mp3"; // 音频地址
}
this.innerAudioContext.play();
// 当重新播放的时候进来
if (this.rePlay == true) {
this.timeUpdate();
this.rePlay = false;
}
} else {
this.innerAudioContext.pause()
}
},
// 音频前进回退
sliderChangeComplate(val) {
// 变动的时间
this.currentTimeStr = this.formatTime(val);
// 实时进度
this.sliderValue = parseInt(val);
this.innerAudioContext.seek(val);
this.innerAudioContext.pause();
},
//格式化时间格式
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;
},
/**
* 格式化时间
* @param {String} date 原始时间格式
* 格式后的时间：hh:mm:ss
**/
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;
}
},
}
</script>
<style>
page {
background-color: #fff !important;
}
.container {
padding: 10px 15px;
}
</style>
问题：开发者工具中.onTimeUpdate方法可能会失效！
官方参考：https://uniapp.dcloud.net.cn/api/media/audio-context.html#
其他博客参考：https://blog.csdn.net/weixin_45328705/article/details/114091301文章来源：https://www.toymoban.com/news/detail-526504.html
录音实现参考：https://blog.csdn.net/weixin_43992507/article/details/129857780文章来源地址https://www.toymoban.com/news/detail-526504.html
到了这里，关于uni-app小程序实现音频播放，uniapp播放录音，uniapp简单实现播放录音的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
