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!