Composant personnalisé de publicité du mini programme WeChat - composant de lecture audio multimédia audio

Cet article explique que le composant audio du composant personnalisé publicitaire de l'applet WeChat est un composant de lecture audio. Tout d'abord, l'objet contextuel du composant audio à obtenir doit être déterminé en fonction de l'identifiant du fichier audio (équivalent à une liaison). cet objet à un composant audio).

<audio controls loop poster=&#39;{{poster}}&#39; name=&#39;{{name}}&#39; author=&#39;{{author}}&#39; src=&#39;{{src}}&#39; id=&#39;audioID&#39;/>

<button size=&#39;mini&#39;  bindtap="audioPlay" > 播放</button>
<button bindtap="audioPause" size=&#39;mini&#39;>暂停</button>

les commandes affiche les touches de contrôle audio

lecture en boucle

l'affiche ajoute une image à la touche de lecture de contrôle

nom nom audio

auteur auteur

fichier audio src

id identifiant unique

Bien qu'il puisse être lu via des contrôles, si vous ne voulez pas de contrôles, vous pouvez également contrôler la lecture via les événements js. Pause

Page({
  data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    name: '此时此刻',
    author: '许巍',
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },

  /**获取 audio上下文audioContext对象 */
  onReady: function () {
    // 使用API: wx.createAudioContext 获取 此音频组件的 上下文对象
    this.audioCtx = wx.createAudioContext('audioID')
  },
  
  /**播放 */
  audioPlay: function() {
    this.audioCtx.play();
  },

  /**暂停 */
  audioPause : function() {
    this.audioCtx.pause();
  }
})

1. Tout d'abord, déterminez l'objet contextuel du composant audio à obtenir en fonction de l'identifiant du fichier audio (équivalent à cet objet. liaison certainsComposant audio)

2. L'appel de fonctions via cet objet peut contrôler directement la lecture et la pause

wx .createAudioContext

Pour cette API, il crée son

objet de contexte (cet objet peut lire le fichier audio) basé sur le composant audio

Ce qui précède utilise this.audioCtx = wx.createAudioContext('audioID') --> Créez

pour cela et attribuez l'attribut audioCtx Lorsque la valeur est

, vous pouvez également passer à l'heure spécifiée :

/**跳转播放到20秒 */
  audio20: function () {
    this.ctx.seek(20);
  }

Articles connexes :

Analyse d'instance de média composants du mini-programme WeChat

Introduction détaillée aux composants personnalisés dans les mini-programmes WeChat

Vidéos associées :

Tutoriel vidéo sur le développement de mini-programmes WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!