uniapp getBackgroundAudioManager 微信小程序后台音频播放器组件及实现

前端样式展示（可后台播放）

   

一、组件

imt-audio.vue

<template>
	<view class="imt-audio">
		<view class="audio-wrapper">
			<view class="audio-number">{
  {format(current)}}</view>
			<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
			 @change="seek=true,clickSeek($event.detail.value)"></slider>
			<view class="audio-number">{
  {format(duration)}}</view>
		</view>
		<view class="audio-control-wrapper" :style="{color}">
			<view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @click="prev">&#xe601;</view>
			<view class="audio-control audio-control-switch" :class="{audioLoading:loading}" :style="{borderColor:color}" @click="this.paused?this.clickPlay():this.clickPaused()">{
  {loading?'&#xe600;':(paused?'&#xe865;':'&#xe612;')}}</view>
			<view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @click="next">&#xe601;</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// audio: uni.createInnerAudioContext(),
				audio: uni.getBackgroundAudioManager(),
				current: 0, //当前进度(s)
				duration: 0, //总时长(s)
				paused: true, //是否处于暂停状态
				loading: false, //是否处于读取状态
				seek: false ,//是否处于拖动状态
				current_tmp:0 //储存current
			}
		},
		props: {
			src: String, //音频链接
			name: String, //音频链接
			img: String, //音频链接