微信小程序背景音频开发

最近又新开发了一款听书类的小程序，现在一阶段已基本完工。代码已开源，链接在文章结尾。欢迎star。

本期给大家讲解一下关于背景音频开发的一些基本业务场景和踩坑。

1.需求拆解

先来看一张图：

从图中可以看到，基本的业务包含以下几个部分

1. 播放
2. 暂停
3. 切换上一个音频
4. 切换下一个音频
5. 拖动进度条改变音频进度
6. 音频进度时间
7. 音频总时间
8. 在音频列表切换任意的音频

还有一个需求就是在小程序退出以后，还会播放：

在上图里看到，当背景音频播放的时候，会出现上方这个小图标：

同样的，在手机的通知栏里面，长这样子：

接下来我们动手实现一下整个功能。

2. 技术分析

要想实现背景音频，我们需要使用微信小程序提供的一个API：getBackgroundAudioManager()，因为我这里使用的UNI开发的，所以直接贴的是UNI的文档了。具体方法参数可以查看文档。

这里注意以下几个点：

• ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 "UIBackgroundModes":["audio"] 才能保证音乐可以后台播放（打包成ipa生效）
• 小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核。
• 在page.json中添加"UIBackgroundModes":["audio"] 。
• 配置完以后，重新编译一下项目。

3. 功能实现

3.1 播放slider

1.获取音频数据

在进入播放音频页面的时候，默认获取一下第一个需要播放的音频。我这里是是根据音频的id去获取音频的详情信息：

/**
 * @description: 获取专辑声音详情信息
 * @returns {*}
 */
 const getTrackInfo = async (trackId: number) => {
  try {
    const res = await albumsService.getTrackInfo(trackId)
        trackInfo.value = res.data
        audios.trackId = res.data?.id as number;
        createBgAudioManager()
  } catch (error) {
    console.log(error)
  }
}
onLoad((options) => {
    const { trackId } = options
    audios.trackId = trackId
    getTrackInfo(trackId)
})

getTrackInfo返回的的数据里面长这样的：

播放音频需要设置红色框标识的字段。

2.创建音频

请求成功，拿到音频详情数据，就需要创建背景音频。

// 初始化背景音频控件
const bgAudioManager = uni.getBackgroundAudioManager();

/**
 * @description: 修改音频地址
 * @returns {*}
 */
const createBgAudioManager = () => {
	// 音频测试地址
	// innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
	if (bgAudioManager) {

		// 若原先的音频未暂停，则先暂停
		if (!bgAudioManager.paused) {
			// stop和pause是不一样的，stop直接停止播放，然后从头开始
			bgAudioManager.stop();
    }
		bgAudioManager.title = trackInfo.value?.trackTitle;
		bgAudioManager.coverImgUrl = trackInfo.value?.coverUrl
		// 设置了src以后会自动播放
		bgAudioManager.src = trackInfo.value?.mediaUrl;
		// bgAudioManager.autoplay = true;
		initAudio(bgAudioManager)
	}
}

这里注意一下，title是必须要设置的。不然音频不播放。当设置了src以后，音频会自动进行播放，无需设置autoPlay。

3.获取播放进度和音频总长度

在上面的函数里面，有个initAudio函数。

/**
 * @description: 初始化音频相关的方法
 * @param {*} ctx
 * @returns {*}
 */
const initAudio = (ctx: any) => {
	ctx.onTimeUpdate((e) => {
		// 当拖动进度条的时候不需要更新进度，使用seek方法
		if(!sliders.isDraging) {
			// 获取当前进度
			const currentTime:number = ctx.currentTime
			// 跟新音频进度和slider进度
			if (currentTime) {
				sliders.progressTime = ctx.currentTime
				audios.currentTime = formatTime(currentTime);
			}
		}
	})
	ctx.onCanplay(() => {
		setTimeout(() => { 
			console.log('音频长度', bgAudioManager.duration);
			// 音频长度,时分秒格式
			const duration = bgAudioManager.duration
			audios.duration = formatTime(duration);
			// 进度条长度=音频长度
			sliders.max = duration
		}, 300)
	})
	ctx.onPlay(() => {
		audios.playStatus = true
	})
	ctx.onPause(() => {
		audios.playStatus = false
	})
	ctx.onEnded((e) => {
		// 播放结束自动切换到下一首歌
		nextAudio()
	})
}

在onCanplay中，我们可以获取音频的总长度，注意这里的setTimeout必须加，不然获取不到duration。这里需要把秒格式和时分秒的格式都保存下来。

在onTimeUpdate中，我们可以获取到当前音频播放的进度。然后实时更新进度条。

接下来就是进度条的实现了。

这里我用的是uni内置组件中的slider组件。

<slider
    step="1"
    activeColor="#f86442"
    block-color="#fff" 
    block-size="10"
    :min="0"
    :max="sliders.max"
    :value="sliders.progressTime"
    @change="sliderChange"
    @touchstart="handleSliderMoveStart "
    @touchend="handleSliderMoveEnd"
/>

max必须设置，也就是音频的总长度。 value值是当前音频播放的进度。

4.拖动进度条

当拖动进度条的时候，触发sliderChange事件，改变音频的进度。

/**
 * @description: 进度条改变事件
 * @returns {*}
 */
const sliderChange = (e) => {
	console.log(e);
	// 拖动slider的值
	const position = e.detail.value
	seekAudio(position)
}
/**
 * 音频跳转
 */
 const seekAudio = (position: number) => {
	bgAudioManager.seek(position)
	// 修改当前进度
	audios.currentTime = formatTime(position)
	sliders.progressTime = position
}

这里通过seek方法来设置进度的跳转。

当拖动进度条的时候，在onTimeUpdate中也在修改进度。两个之间会打架。所以这里我们在onTimeUpdate中使用isDraging字段来控制。当鼠标按下和抬起的时候来控制isDraging的值，不让onTimeUpdate修改进度。

/**
 * @description: 开始拖动进度条事件
 * @returns {*}
 */
const handleSliderMoveStart = () =>  {
	sliders.isDraging = true
}
/**
 * @description: 结束拖动进度条时间
 * @returns {*}
 */
const handleSliderMoveEnd = () => {
	sliders.isDraging = false
}

// 此逻辑在前面的代码有了
ctx.onTimeUpdate((e) => {
    // 当拖动进度条的时候不需要更新进度，使用seek方法
    if(!sliders.isDraging) {
        ...
    }
})

3.2 播放暂停

播放和暂停就非常简单了。

通过playStatus字段来控制播放和暂停按钮的样式切换即可。

其次是事件：

/**
 * @description: 暂停音频
 * @returns {*}
 */
const pauseAudio = () => {
	bgAudioManager.pause() // 停止
}

/**
 * @description: 播放音频
 * @returns {*}
 */
const playAudio = () => {
	bgAudioManager.play() // 播放
}

// 在钩子函数监听

ctx.onPlay(() => {
        audios.playStatus = true
})
ctx.onPause(() => {
        audios.playStatus = false
})

3.3 音频列表渲染和切换

这个列表怎么渲染的我就不讲了。这里还有个下拉刷新和上拉加载更多的功能。

当点击某个音频，获取对应的id，然后请求接口获取对应的音频详情。接口和流程跟之前的一样。唯一注意的是，当我们点击的是正在播放的一个音频的话，啥也不要做。还有一个注意的点，当切换音频的时候需要先暂停，然后再设置src和别的属性。

const createBgAudioManager = () => {

	if (bgAudioManager) {

		// 若原先的音频未暂停，则先暂停
		if (!bgAudioManager.paused) {
			// stop和pause是不一样的，stop直接停止播放，然后从头开始
			bgAudioManager.stop();
    }
		bgAudioManager.title = trackInfo.value?.trackTitle;
		bgAudioManager.coverImgUrl = trackInfo.value?.coverUrl
		// 设置了src以后会自动播放
		bgAudioManager.src = trackInfo.value?.mediaUrl;
		// bgAudioManager.autoplay = true;
		initAudio(bgAudioManager)
	}
}

注意这里的暂停不是pause，是stop。

3.4 上一个下一个切换

当切换上一个和下一个音频的时候，逻辑也是需要票拿到对应的id，然后请求音频详细数据。

/**
 * @description: 切换上一首音频
 * @returns {*}
 */
const prevAudio = () => {
	// 判断是不是第一首，是则提示
	const firstId = audioList.value[0]?.trackId
	if (firstId === audios.trackId) {
		uni.showToast({
			title : "当前已经是第一首了",
			icon  : "none"
		})
		return;
	}
	// 获取上一首的id
	// 从播放列表寻找
	let id = 0;
	audioList.value.forEach((item, index) => {
		if (item.trackId === audios.trackId) {
			id = audioList.value[index - 1]?.trackId
		}
	})

	getTrackInfo(id)
}
 /**
 * @description: 切换下一首音频
 * @returns {*}
 */
const nextAudio = () => {
	// 判断是不是最后一首。是则提示
	const len = audioList.value.length
	const lastId = audioList.value[len - 1]?.trackId
	if (lastId === audios.trackId) {
		uni.showToast({
			title : "当前播放列表已是最新的了，请加载更多",
			icon  : "none"
		})
		return;
	}
	// 获取下一首的id
	// 从播放列表寻找
	let id = 0;
	audioList.value.forEach((item, index) => {
		if (item.trackId === audios.trackId) {
			id = audioList.value[index + 1]?.trackId
		}
	})
	getTrackInfo(id)
}

这里只需要注意的是，如果是第一个和最后一个音频，需要做特殊处理。

3.5 播放结束

最后，当某个音频播放结束的时候，直接请求nextAudio函数即可。

ctx.onEnded((e) => {
        // 播放结束自动切换到下一首歌
        nextAudio()
})

到此为止，我想要的功能基本全部实现了。

4. 更多功能

• 实时上报播放进度
• 音频地址防盗
• 付费，免费体验功能

5. 代码地址

完整代码地址参考：gitee.com/xiumubai/li…