Home > Article > WeChat Applet > Develop a simple player using WeChat applet
This article introduces how to use WeChat applet to develop a simple player. It has certain reference value. I hope it will be helpful to friends who are learning the development of WeChat applet!
Use WeChat applet to develop a simple player
This article follows other people’s examples to create a music player applet, leaving Take the next step. Implement the music player of the following WeChat applet.
The interface is really ugly, first upload the wxss file
//index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; }
It’s just the rounded corners and spacing of a simple button, I still like the color Use the small green primary.
Recommended study: "navicat tutorial"
The following is the index.wxml file
//index.wxml <button type="primary">播放</button> <button type="primary"暂停</button> <button type="primary"设置播放进</button> <button type="primary"停止播放</button> <button type="primary"获取播放状</button>
No way, use developer tools to type it out It’s such an ugly format
The following is the key point index.js
//index.js //获取应用实例 var app = getApp() Page({ data:{ }, //播放 listenerButtonPlay:function(){ wx.playBackgroundAudio({ dataUrl: 'http://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3', title:'李宗盛', //图片地址地址 coverImgUrl:'http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg' }) }, //监听button暂停按钮 listenerButtonPause:function(){ wx.pauseBackgroundAudio({ }); console.log('暂停播放') }, /** * 播放状态 */ listenerButtonGetPlayState:function(){ wx.getBackgroundAudioPlayerState({ success: function(res){ // success //duration 选定音频的长度(单位:s),只有在当前有音乐播放时返回 console.log('duration:' + res.duration) console.log('currentPosition:' + res.currentPosition) //status 播放状态(2:没有音乐在播放,1:播放中,0:暂停中) console.log('status:' + res.status) console.log('downloadPercent:' + res.downloadPercent) //dataUrl 歌曲数据链接,只有在当前有音乐播放时返回 console.log('dataUrl:' + res.dataUrl) }, fail: function() { // fail }, complete: function() { // complete } }) }, /** * 设置进度 */ listenerButtonSeek:function(){ wx.seekBackgroundAudio({ position: 40 }) }, /** * 停止播放 */ listenerButtonStop:function(){ wx.stopBackgroundAudio({ }) console.log('停止播放') }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 /** * 监听音乐播放 */ wx.onBackgroundAudioPlay(function() { // callback console.log('onBackgroundAudioPlay') }) /** * 监听音乐暂停 */ wx.onBackgroundAudioPause(function() { // callback console.log('onBackgroundAudioPause') }) /** * 监听音乐停止 */ wx.onBackgroundAudioStop(function() { // callback console.log('onBackgroundAudioStop') }) } })
You can first look at the onLoad function in order. There are three listening functions defined in it, which can be seen in the console. The effect is as shown in the figure
PHP Chinese website, a large number of front-end video tutorials, jQuery video tutorial, welcome to learn!
The above is the detailed content of Develop a simple player using WeChat applet. For more information, please follow other related articles on the PHP Chinese website!