如何在小程序中实现音频播放
需要注意几点
由于现在官方不再维护 audio 组件 ，所以音频播放尽可能采取 wx.createInnerAudioContext() 接口 （ 若需要在后台播放，则采用 wx.getBackgroundAudioManager() ）
音频播放，只有在播放时才可以获取到音频长度（参考了多个带音频的小程序 qq音乐，百度网盘等，都是采取自动播放的方式，以获取总时长）
由于 wx.createInnerAudioContext()和wx.getBackgroundAudioManager()接口都差不多，（简单来说，前者只会在当前页面播放，后者可在离开播放页面甚至返回微信界面（需要配置下），继续播放音乐），这里以 背景音乐为例子
wx.getBackgroundAudioManager()这个api返回的是一个对象（BackgroundAudioManager），同时需要注意 背景音频播放是获取的 全局唯一的背景音频管理器，也就是说，你不销毁或者停止，他会一直播放（离开微信和配置了后台播放除外）
BackgroundAudioManager在这个对象上有一些方法，比如：暂停，设置地址，监听播放状态（播放，停止，暂停，错误。。。。等）文章来源：https://www.toymoban.com/news/detail-719063.html
- 获取全局唯一的背景音频管理器
const InnerAudioContext = uni.getBackgroundAudioManager();
具体代码如下（此处是封装为播放组件，可直接复制）文章来源地址https://www.toymoban.com/news/detail-719063.html
<template>
<view class="">
<view class="audio-wrapper">
<view class="audio-number">{{forNowTime}}</view>
<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
@change="change"></slider>
<!-- 时长 -->
<view class="audio-number">{{forAllTime}}</view>
</view>
<view class="audio-control-wrapper" :style="{color:color}">
<!-- 随机播放 -->
<view class="audio-control audio-more iconfont music_icon_random" hover-class="btn-bg-m"></view>
<!-- 上一首 -->
<view class="audio-control iconfont music_icon_previous" hover-class="btn-bg-m" v-if="control" @click="prev"></view>
<!-- 播放 -->
<view class="audio-control audio-control-switch iconfont" hover-class="btn-bg" :class="{'music_icon_play':paused,'music_icon_pause':!paused}" @click="operation">
</view>
<!-- 下一首 -->
<view class="audio-control iconfont music_icon_next" v-if="control" hover-class="btn-bg-m" @click="next"></view>
<!-- 列表 -->
<view class="audio-control audio-more iconfont music_icon_list" hover-class="btn-bg-m" ></view>
</view>
</view>
</template>
<script>
const InnerAudioContext = uni.getBackgroundAudioManager(); //createInnerAudioContext
export default {
data() {
return {
forNowTime:'00:00', //当前播放时间 4:30 格式
forAllTime:'', //总时长 格式化
duration:0,//总时间 秒
current:0, //slider当前进度
seek: false, //是否处于拖动状态
paused: true, //是否处于暂停状态
}
},
props: {
audioSrc: { //音频链接
type:String,
default:''
},
audioName:{ //歌曲名称
type:String,
default:''
},
control: { //是否需要上一曲/下一曲按钮
type:Boolean,
default:true
},
nextAudio:{ //播放完成后是否继续播放下一首，需定义@next事件
type:Boolean,
default:false,
},
color: { //主色调
type:String,
default:'#5189FF'
}
},
created() {
// 是否遵循系统静音开关
InnerAudioContext.obeyMuteSwitch = false
// 监听播放
InnerAudioContext.onPlay(()=>{
this.paused=false
console.log('播放中。。。')
})
// 监听暂停
InnerAudioContext.onPause(()=>{
this.paused=true
})
// 监听播放结束
InnerAudioContext.onEnded(()=>{
// 是否需要 自动播放下一首
if(this.nextAudio) {
this.next()
}else{
// 暂停
this.paused=true
}
})
// 监听 进度更新
InnerAudioContext.onTimeUpdate(()=>{
// 获取总进度
this.duration = InnerAudioContext.duration
// 当前进度 非拖动时
if (!this.seek) {
this.current= InnerAudioContext.currentTime
}
})
//监听 进度更改完成
InnerAudioContext.onSeeked(() => {
this.seek = false
})
// 音频播放失败
this.errMsg()
},
mounted(){
},
beforeDestroy(){
// InnerAudioContext.pause()
},
computed:{
},
watch: {
// 音频地址
audioSrc(value){
if(InnerAudioContext.src==value)return
InnerAudioContext.src= value
this.current=0
// 设置自动播放 以获取总时长
InnerAudioContext.autoplay=true
},
// 音频名字
audioName(value,o){
InnerAudioContext.title =value
},
// 音频总时长--格式化
duration(value){
this.forAllTime = this.format(value)
},
// 当前播放位置
current(now){
this.forNowTime = this.format(now)
if(!InnerAudioContext.paused){
this.paused=false
}
}
},
methods: {
//返回prev事件
prev() {
this.$emit('prev')
},
//返回next事件
next() {
this.$emit('next')
},
//时间格式化
format(num) {
return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(
Math.floor(num % 60)).length) + Math.floor(num % 60)
},
//播放/暂停操作
operation() {
// 停止播放状态
InnerAudioContext.paused?InnerAudioContext.play():InnerAudioContext.pause()
},
//快进
change(e) {
InnerAudioContext.seek(e.detail.value)
},
// 播放失败
errMsg(){
InnerAudioContext.onError((res)=>{
let ErrMsg=res.errMsg
wx.showModal({
title: '播放失败',
content:ErrMsg,
showCancel:false,
success: function(res) {
}
})
})
}
},
}
</script>
<style>
.audio-wrapper {
display: flex;
align-items: center;
padding-bottom: 90rpx;
}
.audio-number {
font-size: 24upx;
line-height: 1;
color: #333;
}
.audio-slider {
flex: 1;
margin: 0 30upx;
}
.audio-control-wrapper {
margin-top: 20upx;
display: flex;
align-items: center;
justify-content: space-around;
}
.audio-control {
font-size: 32rpx;
width:80rpx;
height:80rpx;
border:1rpx solid rgba(168,196,255,1);
border-radius:50%;
text-align: center;
line-height: 80rpx;
}
.audio-more{
border:none;
font-size: 32rpx;
border-radius: 50%;
}
.audio-control-switch {
color: #FFFFFF;
font-size: 42rpx;
margin: 0 60rpx;
width:120rpx;
height:120rpx;
line-height: 120rpx;
background:rgba(81,137,255,1);
border-radius:50%;
border: none;
}
.audioLoading {
animation: loading 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}
</style>
到了这里，关于微信小程序中音频播放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
