WeChat ミニ プログラム広告カスタム コンポーネント - メディア オーディオ再生コンポーネント オーディオ

この記事では、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はオーディオコントロールキーを表示します

ループループ再生

ポスターはコントロール再生キーに追加された画像です

nameオーディオ名

著者author

srcオーディオファイル

id一意の識別

可能ですがコントロールを使用して実行します。コントロールが必要ない場合は、js イベントを通じて再生と一時停止を制御することもできます

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 まず、オーディオ ファイルの ID に基づいて取得するオーディオ コンポーネントのコンテキスト オブジェクトを決定します。 (thisオブジェクトバインディングA オーディオコンポーネントに相当)

2. このオブジェクトを介して関数を呼び出すと、再生と一時停止を直接制御できます

wx.createAudioContext

このAPIでは、ベースで作成されますオーディオコンポーネント上で Context オブジェクト(このオブジェクトはオーディオファイルを再生できます)

this.audioCtx = wx.createAudioContext('audioID') --> これに audioCtx 属性を作成します それを割り当てます 値に達したら、指定した時間にジャンプすることもできます:

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

関連記事:

WeChat mini プログラムのメディアコンポーネントのインスタンス分析

WeChat mini のカスタムコンポーネントの詳細な紹介プログラム

関連ビデオ:

WeChat ミニ プログラムの開発に関するビデオ チュートリアル

以上がWeChat ミニ プログラム広告カスタム コンポーネント - メディア オーディオ再生コンポーネント オーディオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。