您的位置:首页 > 房产 > 建筑 > 微信小程序:实现音乐播放器的功能

微信小程序:实现音乐播放器的功能

2024/12/23 8:34:58 来源:https://blog.csdn.net/mingangel/article/details/139497650  浏览:    关键词:微信小程序:实现音乐播放器的功能

在编写微信小程序时,也许会用到播放背景音乐的功能,那么如果是自动播放背景音乐,可以在加载页面时就运行播放音乐的函数,若是希望简单实现音乐播放器的功能,那么设计几个按钮,并且设计按钮点击的事件。

接下来我说明按钮实现音乐播放的功能。wxss文件就不讲了,如果需要设置按钮格式,可以定义按钮的类名,在wxss中编写想要的按钮样式。

首先就需要有音乐的API接口,如果没有source,那么就无从谈起使用,可以参考我的API接口文章,里面整理了一些免费API接口,适合新手用。

然后就是在wxml文件中定义button组件,比如下面这个按钮实现“”播放“”的功能。

<button class="button-style1" bindtap="audioPlay">播放</button>  

在.js文件中编写相应的点击按钮事件

  data: {audioContext: null},
wx.request({url:'换成自己的音乐API接口',method:'GET',success:(ret)=>{console.log(ret.data.data)#这里相应的也要改this.setData({audio:ret.data.data#这里相应的也要改})}
})
},
audioPlay: function () {  this.data.audioContext.src = this.data.audio.Music,this.data.audioContext.play()  
},  

当然有播放就有其他的功能实现,以下有暂停,挑选某一秒播放等。

如: this.data.audioContext.pause() , this.data.audioContext.seek(0) 只需要把 this.data.audioContext.play()  替换成以上的函数就行。

接下来最后一步就是页面加载:

onLoad(options) {this.setData({audioContext: wx.createInnerAudioContext() })},

至此,可以简单实现音乐播放器功能

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com