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

php是最好的语言
Freigeben: 2018-07-28 09:07:51
Original
3312 Leute haben es durchsucht

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>
Nach dem Login kopieren

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: &#39;http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000&#39;,
    name: &#39;此时此刻&#39;,
    author: &#39;许巍&#39;,
    src: &#39;http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46&#39;,
  },

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

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

1. Bestimmen Sie zunächst das Kontextobjekt der zu erhaltenden Audiokomponente basierend auf der ID der Audiodatei (entspricht dieser Objektbindung<🎜). >jemandAudiokomponente)

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 <🎜 zu 🎜>Sie können auch zur angegebenen Zeit springen:

/**跳转播放到20秒 */
  audio20: function () {
    this.ctx.seek(20);
  }
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!