Develop a simple player using WeChat applet-Mini Program Development-php.cn

Develop a simple player using WeChat applet

angryTom

Release： 2020-03-14 10:17:56

forward

3063 people have browsed it

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!

Develop a simple player using 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.

Develop a simple player using WeChat applet

The interface is really ugly, first upload the wxss file

//index.wxss
.button-style{ 
background-color: #eee; 
border-radius: 8rpx; 
margin: 20rpx; 
}

Copy after login

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>

Copy after login

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: &#39;http://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3&#39;,
      title:&#39;李宗盛&#39;,
      //图片地址地址
      coverImgUrl:&#39;http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg&#39;
    })
  },
  //监听button暂停按钮
  listenerButtonPause:function(){
    wx.pauseBackgroundAudio({
    });
    console.log(&#39;暂停播放&#39;)
  },
  /**
   * 播放状态
   */
  listenerButtonGetPlayState:function(){
    wx.getBackgroundAudioPlayerState({
      success: function(res){
        // success
        //duration  选定音频的长度（单位：s），只有在当前有音乐播放时返回
        console.log(&#39;duration:&#39; + res.duration)
        console.log(&#39;currentPosition:&#39; + res.currentPosition)  
        //status    播放状态（2：没有音乐在播放，1：播放中，0：暂停中）
        console.log(&#39;status:&#39; + res.status)  
        console.log(&#39;downloadPercent:&#39; + res.downloadPercent) 
        //dataUrl   歌曲数据链接，只有在当前有音乐播放时返回 
        console.log(&#39;dataUrl:&#39; + res.dataUrl)
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  /**
   * 设置进度
   */
  listenerButtonSeek:function(){
    wx.seekBackgroundAudio({
      position: 40
    })
  },
  /**
   * 停止播放
   */
  listenerButtonStop:function(){
    wx.stopBackgroundAudio({
    })
    console.log(&#39;停止播放&#39;)
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数  
    /** 
     * 监听音乐播放 
     */  
    wx.onBackgroundAudioPlay(function() {
      // callback
      console.log(&#39;onBackgroundAudioPlay&#39;)
    })
    /**
     * 监听音乐暂停
     */
    wx.onBackgroundAudioPause(function() {
      // callback
      console.log(&#39;onBackgroundAudioPause&#39;)
    })
    /**
     * 监听音乐停止
     */
    wx.onBackgroundAudioStop(function() {
      // callback
      console.log(&#39;onBackgroundAudioStop&#39;)
    })
  }
})

Copy after login

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

Develop a simple player using WeChat applet

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!