微信小程序实现自定义音乐播放（定时、进度条）

喵小花儿和喵小胖儿

已于 2022-09-27 09:03:48 修改

阅读量3.5k

点赞数 1

分类专栏：微信小程序踩坑记文章标签：微信小程序小程序

于 2022-09-13 10:58:39 首次发布

本文链接：https://blog.csdn.net/qq_41687299/article/details/126828932

版权

本文详细介绍如何在微信小程序中使用`wx.getBackgroundAudioManager()`获取音频管理器，并结合app.json配置，实现背景音乐播放。通过实例展示了如何创建进度条组件，结合canvas绘制背景圆环和彩色圆环，同时处理播放控制、定时功能和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现关键：

1、wx.getBackgroundAudioManager()

2、在app.json中配置："requiredBackgroundModes": ["audio"]

界面

具体实现步骤：

======****进度条组件

wxml

<view class="circle_box" style="{
  {size}}px;height:{
  {size}}px">
    <!-- <canvas class="circle_bg" canvas-id="{
  {draw}}bg" style="{
  {size + 10}}px;height:{
  {size + 10}}px"></canvas>  -->
    <canvas class="circle_draw" canvas-id="{
  {draw}}" style="{
  {size }}px;height:{
  {size }}px"></canvas> 
    <!-- <text class='circle_txt'> {
  {txt}}%  </text>   -->
</view>

wxss

.circle_box,.circle_draw{ 
  width: 100%;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  position: absolute; 
}
.circle_bg{
  width: 100%;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  position: absolute;
}
.circle_box{
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  z-index: 1001;
}
.circle_txt{
  position: absolute;
  font-size: 28rpx;
}

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    draw: {//画板元素名称id
      type: String,
      value: 'draw'
    },
    per: { //百分比 通过此值转换成step
      type: String,
      value: '0'
    },
    r: {//半径
      type: String,
      value: '50'
    }

  },

  observers: {
    "per": function (val) {
      // this.attached()
      this.init()
    }
  },

  data: { /*  私有数据，可用于模版渲染 */
    step: 1, //用来算圆的弧度0-2
    size: 0, //画板大小
    screenWidth: 750, //实际设备的宽度
    txt: 0
  },
  methods: {
    // 初始化
    init() {
      const _this = this;
      //获取屏幕宽度
      wx.getSystemInfo({
        success: function (res) {
          _this.setData({
            screenWidth: res.windowWidth
          });
        },
      });
      //初始化
      const el = _this.data.draw; //画板元素
      const per = _this.data.per; //圆形进度
      const r = Number(_this.data.r); //圆形半径

      _this.setData({
        step: (2 * Number(_this.data.per)) / 100,
        txt: _this.data.per
      });


      //获取屏幕宽度(并把真正的半径px转成rpx)
      let rpx = (_this.data.screenWidth / 750) * r;
      //计算出画板大小
      this.setData({
        size: rpx * 2
      });
      const w = 4;//圆形的宽度

最低0.47元/天解锁文章