WeChat mini program advertising custom component--media audio playback component audio-Mini Program Development-php.cn

WeChat mini program advertising custom component--media audio playback component audio

php是最好的语言

Release： 2018-07-28 09:07:51

Original

3342 people have browsed it

This article explains that the component audio of the WeChat applet advertising custom component is an audio playback component. First, the context object of the audio component to be obtained must be determined based on the id of the audio file (equivalent to binding this object to an audio component).

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

Copy after login

controlsDisplay audio control keys

loop loop playback

poster is a picture added to the control playback key

name audio name

authorauthor

src audio file

id unique identifier

Although it can be played through controls, if you do not want controls, you can also control playback and pause through js events

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

Copy after login

1. First, determine the context object of the audio component to be obtained based on the id of the audio file (equivalent to this object binding someAudio component)

2. Calling functions through this object can directly control play and pause

wx.createAudioContext

For this API, create its context object (this object can play the audio file) based on the audio component.

Use this above. audioCtx = wx.createAudioContext('audioID') --> Create the audioCtx attribute for this and assign a value

You can also jump to the specified time:

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

Copy after login

Instance analysis of media components of WeChat applet

Detailed introduction to custom components in WeChat mini programs