WeChat 미니 프로그램 광고 사용자 정의 구성 요소-미디어 오디오 재생 구성 요소 오디오-미니 프로그램 개발-php.cn

WeChat 미니 프로그램 광고 사용자 정의 구성 요소-미디어 오디오 재생 구성 요소 오디오

php是最好的语言

풀어 주다： 2018-07-28 09:07:51

원래의

3372명이 탐색했습니다.

이 글에서는 WeChat 애플릿 광고 맞춤 구성요소의 구성요소 오디오가 오디오 재생 구성요소임을 설명합니다. 먼저, 획득할 오디오 구성요소의 컨텍스트 개체는 오디오 파일의 ID(에 해당)를 기반으로 결정되어야 합니다. 이 개체를 오디오 구성 요소에 바인딩).

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

로그인 후 복사

controls오디오 제어 키 표시

루프 루프 재생

poster에 제어 재생 키 그림 추가

이름 오디오 이름

authorauthor

src 오디오 파일

id 고유 식별자

컨트롤을 통해 재생할 수 있지만, 컨트롤을 원하지 않으면 js 이벤트를 통해 재생 및 일시 중지를 제어할 수도 있습니다.

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();
  }
})

로그인 후 복사

1 먼저 오디오 파일의 ID를 기반으로 얻을 오디오 구성 요소의 컨텍스트 개체를 결정합니다( 이것에 해당 #🎜🎜 #Object 바인딩someAudio 컴포넌트)

2 . 이 개체를 통해 호출하면 재생 및 일시 정지를 직접 제어할 수 있습니다. 위에서는 this.audioCtx = wx.createAudioContext('audioID') -->

값을 할당하고

지정된 시간으로 이동할 수도 있습니다:

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

로그인 후 복사