微信小程序音频播放

最新推荐文章于 2024-07-23 17:00:19 发布

15886991492

最新推荐文章于 2024-07-23 17:00:19 发布

阅读量12

点赞数

文章标签：微信小程序音视频小程序

一，音频播放

1，实现方法

2，实现流程

二，背景音频播放

1，实现方法

2，实现流程

3，背景音频注意点

4，app.json属性配置

三，音频播放进度条，滑动改变进度，界面

1，所用到的组件--slider

2，图片360°不间断旋转css

微信小程序播放音频有2种方式，一个是正常播放音频，一个是背景音频，这两个虽然都可以让音频进行播放，api也有很多相同的地方，但是还是有区别的，背景音频播放可以在锁屏的情况下，及小程序所有页面播放，正常的音频只能在当前页面播放。

一，音频播放

1，实现方法

wx.createInnerAudioContext({})
// 这里用到的是微信音频api,创建内部 audio 上下文 InnerAudioContext 对象

2，实现流程

1,首先创建音频上下文对象(这里以在onLoad创建展示并把audioCtx实例存储到data里面)
Page({
  data: {
    audioCtx: {}
  },
  onLoad() {
    const audioCtx = wx.createInnerAudioContext({})
    this.setData({
      audioCtx
    })
  },
})

2,创建完成之后进行使用(这里列举常用的一些属性,更多属性建议查询文档)
  playAudio() {
    // 这里也可以在调用这个方法的时候传参 然后这里接收赋值使用
    this.data.audioCtx.src = ''  // 音频路径
    this.data.audioCtx.autoplay = true   // 是否自动开始播放，默认为false
    this.data.audioCtx.loop = true  // 是否循环播放，默认为false
    this.data.audioCtx.volume = 1  // 音量。范围0~1。默认为 1
    this.data.audioCtx.currentTime = 100  // 当前音频的播放位置（单位 s）
    this.data.audioCtx.play()   // 播放音频
    this.data.audioCtx.pause()  // 暂停播放
    this.data.audioCtx.stop()  // 停止播放
    this.data.audioCtx.seek()  // 跳转的时间，单位秒,精确到小数点后3位，即支持ms级别精确度
    this.data.audioCtx.onPlay(() => {
      // 监听音频播放事件
    })
    this.data.audioCtx.offPlay(() => {
      // 移除音频播放事件
    })
    this.data.audioCtx.onPause(() => {
      // 监听音频暂停事件
    })
    this.data.audioCtx.offPause(() => {
      // 移除音频暂停事件
    })
    this.data.audioCtx.onStop(() => {
      // 监听音频停止事件
    })
    this.data.audioCtx.offStop(() => {
      // 移除音频停止事件
    })
    this.data.audioCtx.onEnded(() => {
      // 监听音频自然播放至结束的事件
    })
    this.data.audioCtx.offEnded() // 移除音频自然播放至结束的事件的监听函数----*如果有监听音频播放结束的事件建议加上移除播放结束的事件
    this.data.audioCtx.onError(() => {
      // 监听音频播放错误事件
    })
    this.data.audioCtx.offError(() => {
      // 移除音频播放错误事件的监听函数
    })
  }

二，背景音频播放

1，实现方法

wx.getBackgroundAudioManager()
// 获取全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放

2，实现流程

1,首先创建音频上下文对象(这里以在onLoad创建展示并把audioCtx实例存储到data里面)
Page({
  data: {
    backgroundAudioManager : {}
  },
  onLoad() {
    const backgroundAudioManager = wx.getBackgroundAudioManager()
    this.setData({
      backgroundAudioManager 
    })
  },
})

2,创建完成之后进行使用(这里列举常用的一些属性,更多属性建议查询文档)
backgroundAudio() {
    let backgroundAudioManager = this.data.backgroundAudioManager
    backgroundAudioManager.title = ''     // 音频标题(必填)
    backgroundAudioManager.coverImgUrl = ''  // 封面图 URL
    backgroundAudioManager.epname = ''       // 专辑名
    backgroundAudioManager.singer = ''       // 歌手名
    backgroundAudioManager.playbackRate = 1  // 播放速度。范围 0.5-2.0，默认为 1
    backgroundAudioManager.currentTime = 0   // 当前音频的播放位置（单位：s）
    backgroundAudioManager.play()   // 播放音频
    backgroundAudioManager.pause()  // 暂停音频
    backgroundAudioManager.stop()   // 停止播放
    backgroundAudioManager.seek()   // 跳转的位置，单位 s。精确到小数点后 3 位，即支持 ms 级别精确度
    backgroundAudioManager.onPlay(() => {
      // 监听背景音频播放事件
    })
    backgroundAudioManager.onPause(() => {
      // 监听背景音频播放事件
    })
    backgroundAudioManager.onError(() => {
      // 监听背景音频播放错误事件
    })
    backgroundAudioManager.onTimeUpdate(() => {
      // 背景音频播放进度更新事件的监听函数

    })
    backgroundAudioManager.onEnded(() => {
      // 监听背景音频自然播放结束事件
    })
    backgroundAudioManager.onNext(() => {
      // 监听用户在系统音乐播放面板点击下一曲事件
    })
    backgroundAudioManager.onPrev(() => {
      // 监听用户在系统音乐播放面板点击上一曲事件
    })
  }

3，背景音频注意点

背景音频设置路径之后就会自动播放
如果在只是在当前界面锁屏播放的话需要在页面卸载的时候停止播放背景音频

4，app.json属性配置

如果背景音频需要锁屏播放的话需要在app.json文件中配加上这行代码才可以，要不然不能锁屏播放 
"requiredBackgroundModes": ["audio", "location"],

三，音频播放进度条，滑动改变进度，界面

微信小程序音频播放_锁屏

简易demo展示

编辑

1，所用到的组件--slider

<view class="musicPlay">
   <text class="start">开始时间</text>
   <slider bindchange="sliderChange" class="slider" block-size="12px" max="{{maxTime}}" value="{{value}}" min="0"></slider>
   <text class="end">结束时间</text>
</view>

<!-- sliderChange 是拖动一次slider组件后触发的事件 -->

<!-- block-size 滑块的大小，取值范围为 12 - 28 -->

<!-- max 最大值 -->

<!-- min 最小值  默认是0可以不写 -->

<!-- value 当前取值 -->

<!-- slider组件宽度无法直接更改 -->

// 时间处理  
formatTime(seconds: number): string {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    const formattedMinutes = String(minutes).padStart(2, '0')
    const formattedSeconds = String(remainingSeconds).padStart(2, '0')
    return `${formattedMinutes}:${formattedSeconds}`
},
// 在点击播放按钮之后应该加上下面这段代码实时更新slider的进度
      this.data.timer = setInterval(() => {
        let currentValue = this.data.value
        // 计算新的 value 值  
        let newValue = currentValue + 1
        // 使用 this.setData 来更新页面数据  
        this.setData({
          value: newValue
        })
        if (this.data.maxTime == this.data.value) {
          this.setData({
            value: 0
          })
          clearInterval(this.data.timer)
        }
      }, 1000)
// 拖动slider事件--拖动组件会拿到拖动的时间然后修改value值以及时间
  sliderChange(e: any) {
    let v = e.detail.value
    console.log(v, '拖动时间')
    this.setData({
      value: v,
      nowTime: this.formatTime(Number(v))， // 这里是修改开始时间
    })
    音频播放器.seek(v) // 这里是传递给音频播放器跳转的时间
  },
// 当然音频方法中也需要写实时更新播放进度(当然时间也需要去处理)
音频播放器.onTimeUpdate(() => {
      // 背景音频播放进度更新事件的监听函数

    })

2，图片360°不间断旋转css

.sound_bg {
  position: fixed;
  top: 25%;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 5rpx solid #ccc;
  box-sizing: border-box;
  overflow: hidden;
}

.sound_bg_img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: picturesRotate 30s linear infinite;
/* 上面是控制图片360°旋转的动画 可以自行修改对应的时间 */
}

@keyframes picturesRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

原创作者: u_16885435 转载于: https://blog.51cto.com/u_16885435/11337619

15886991492

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序音频播放

目录一，音频播放 1，实现方法 2，实现流程二，背景音频播放 1，实现方法 2，实现流程 3，背景音频注意点4，app.json属性配置三，音频播放进度条，滑动改变进度，界面 1，所用到的组件--slider ...
复制链接

扫一扫