音乐播放进度条html,微信原生小程序实现音乐播放进度条

野性酷女 2022-10-06 07:56 184阅读 0赞

audio标签、progress标签实现音乐播放进度条

HTML5 audio标签、progress标签实现音乐播放及进度条，通过拖动进度条更新播放进度。本次分享以功能实现为主，样式先不考究，见谅。

HTML

点击播放

\{ \{musicPercent\}\}%

audio 标签必须写进HTML，只要不设置controls="true"就不会展示出来；

bindtouchmove表示触摸事件；

progress标签通过percent属性设置进度

CSS

.play-it\{

margin-left: 300rpx;

.music-prog\{

width: 550rpx;

height: 10rpx;

margin: 50rpx 100rpx;

color: \#0099ff;

background-color: \#999;

.percent-num\{

margin: -20rpx 0 0 100rpx;

font-size: 28rpx;

onShow() \{

// 监听音乐播放

let that = this

wx.onBackgroundAudioPlay(() => \{

that.timer && clearInterval(that.timer)

that.timer = setInterval(() => \{

wx.getBackgroundAudioPlayerState(\{

success: res => \{

let per = (res.currentPosition/res.duration)\*10000

that.setData(\{

musicPercent: Math.round(per)/100 + '',

duration: res.duration

\})

\}, 1000)

\})

// 监听背景音频暂停事件

wx.onBackgroundAudioPause(() => \{

clearInterval(that.timer)

\})

// 监听背景音频停止事件

wx.onBackgroundAudioStop(() => \{

clearInterval(that.timer)

\})

\},

playMusic() \{

let obj = \{

dataUrl: 'http://p6jceeddp.bkt.clouddn.com/%E5%B0%A4%E9%95%BF%E9%9D%96%20-%20%E6%98%A8%E6%97%A5%E9%9D%92%E7%A9%BA.mp3',

title: '昨日青空',

coverImgUrl: '/static/images/avatar.png'

wx.playBackgroundAudio(obj)

\},

setTouchMove (e) \{

if(e.touches\[0\].clientY >= 390 && e.touches\[0\].clientY <= 410) \{

if (e.touches\[0\].clientX >= 55 && e.touches\[0\].clientX <= 355) \{

let percent = (e.touches\[0\].clientX - 55)/300\*10000

this.setData(\{

musicPercent: Math.round(percent)/100 + ''

\})

this.data.current = (this.data.musicPercent/100)\*this.data.duration

\},

setProgress() \{

let that = this

console.log('bindtouchend')

wx.getBackgroundAudioPlayerState(\{

success: res => \{

that.data.current !== res.currentPosition &&

wx.seekBackgroundAudio(\{

position: that.data.current,

success () \{

console.log('seek', that.data.current)

\})

确定进度条的有效区域

横向: e.touches\[0\].clientX

纵向: e.touches\[0\].clientY

此处横向为 55~355 ，纵向为 390~410

定义触摸事件

获取到的横向进度条位置，计算用户所拖拽到的进度条位置

\*\*注意：在此处调用wx.seekBackgroundAudio()设置播放进度，会导致音频出现卡顿的效果。因为用户拖动的过程中会多次调用seek方法，所以应该把设置播放进度放在拖动进度条完成之后再执行。

touchend监听触摸事件的停止

根据触摸事件中计算得到的时间current，调用wx.seekBackgroundAudio()设置播放进度

![cdf3658e99878b0c7f1bee827bc5de94.png][]

[cdf3658e99878b0c7f1bee827bc5de94.png]: /images/20221005/1383e06606724a1187ba0d2c40e67e74.png

音乐播放进度条html,微信原生小程序实现音乐播放进度条

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue实现mp3音乐播放及动态进度条

相关 html5微信浏览器背景音乐播放

相关微信小程序环形进度条_微信小程序实现圆形进度条动画

相关音乐播放进度条html,微信原生小程序实现音乐播放进度条

相关 Android带播放进度条的音乐播放器

相关原生js实现音乐播放界面

相关微信小程序Audio列表音乐单独播放

相关 vue - 使用SVG实现圆形进度条音乐播放

相关实现音乐播放器（播放/暂停、可拉动进度条）

相关微信播放背景音乐