投稿
  1. 极客之音首页
  2. 前端开发

微信小程序背景音频开发

李, 若俞 • • 前端开发 • 阅读 344

微信小程序背景音频开发

最近又新开发了一款听书类的小程序，现在一阶段已基本完工。代码已开源，链接在文章结尾。欢迎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. 代码地址

完整代码地址参考：https://gitee.com/xiumubai/listen-to-books/blob/master/pages/player/player.vue

文章出自：https://juejin.cn/post/7226228585371041848

作者：白哥学前端


原文始发于微信公众号（前端24）：微信小程序背景音频开发

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216108.html

赞 (0)
李, 若俞的头像李, 若俞
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！