Das WeChat-Miniprogramm bewirbt benutzerdefiniertes Komponenten-Medien-Audio für die Wiedergabe von Komponenten-Audio

In diesem Artikel wird erläutert, dass es sich bei der Audiokomponente der benutzerdefinierten WeChat-Applet-Werbekomponente um eine Audiowiedergabekomponente handelt. Zunächst muss das Kontextobjekt der abzurufenden Audiokomponente anhand der ID der Audiodatei bestimmt werden (entspricht der Bindung). dieses Objekt einer Audiokomponente zuordnen).

<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>

Steuerelemente, Anzeige, Audio-Steuertasten

Loop-Loop-Wiedergabe

Poster hat ein Bild hinzugefügt, um die Wiedergabetaste zu steuern

Name Audio-Name

Autor Autor

src-Audiodatei

id eindeutige Kennung

Obwohl die Wiedergabe über Steuerelemente erfolgen kann, können Sie, wenn Sie keine Steuerelemente wünschen, auch die Wiedergabe und Pause steuern durch js-Ereignisse

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. Bestimmen Sie zunächst das Kontextobjekt der zu erhaltenden Audiokomponente basierend auf der ID der Audiodatei (entspricht dieser ObjektbindungjemandAudiokomponente)

2. Durch Aufrufen von Funktionen über dieses Objekt können Wiedergabe und Pause direkt gesteuert werden

wx.createAudioContext

Für diese API wird ihr

Kontextobjekt (dieses Objekt kann die Audiodatei abspielen) basierend auf der Audiokomponente erstellt

Verwendung dies oben. audioCtx = wx.createAudioContext('audioID') --> Erstellt

dafür und weist dem Attribut audioCtx den Wert Sie können auch zur angegebenen Zeit springen:

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

Verwandte Artikel:

Analyse von Beispielen für Medienkomponenten des WeChat-Applets

Detaillierte Einführung in benutzerdefinierte Komponenten in WeChat-Miniprogrammen

Ähnliche Videos:

Video-Tutorial zur Entwicklung von WeChat-Miniprogrammen

Das obige ist der detaillierte Inhalt vonDas WeChat-Miniprogramm bewirbt benutzerdefiniertes Komponenten-Medien-Audio für die Wiedergabe von Komponenten-Audio. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!