Développer un lecteur simple à l'aide de l'applet WeChat-Développement de mini-programmes-php.cn

Développer un lecteur simple à l'aide de l'applet WeChat

angryTom

Libérer： 2020-03-14 10:17:56

avant

3064 Les gens l'ont consulté

Cet article explique comment utiliser l'applet WeChat pour développer un lecteur simple. Il a une certaine valeur de référence. J'espère qu'il sera utile aux amis qui apprennent le développement de l'applet WeChat !

Développer un lecteur simple à l'aide de l'applet WeChat

Utiliser l'applet WeChat pour développer un lecteur simple

Cet article suit les exemples d'autres personnes pour créer une applet de lecteur de musique Prenez le. prochaine étape. Implémentez le lecteur de musique de l'applet WeChat suivante.

Développer un lecteur simple à laide de lapplet WeChat

L'interface est vraiment moche. Téléchargez d'abord le fichier wxss

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

Copier après la connexion

C'est juste un simple coin arrondi et un espacement du bouton. Je veux toujours la couleur. . Utilisez le petit primaire vert.

Étude recommandée : "Tutoriel navicat"

Ce qui suit est le fichier index.wxml

//index.wxml
<button type="primary">播放</button>
<button type="primary"暂停</button>
<button type="primary"设置播放进</button>
<button type="primary"停止播放</button>
<button type="primary"获取播放状</button>

Copier après la connexion

Pas question, utilisez les outils de développement pour tapez-le C'est un format tellement moche

Ce qui suit est le point clé dans 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;)
    })
  }
})

Copier après la connexion

Vous pouvez d'abord regarder la fonction onLoad dans l'ordre. fonctions qui y sont définies, qui peuvent être vues dans la console. L'effet est comme le montre l'image

Développer un lecteur simple à laide de lapplet WeChat