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

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>

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: '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. 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);
  }

Related articles:

Instance analysis of media components of WeChat applet

Detailed introduction to custom components in WeChat mini programs

Related videos:

Video tutorial on developing WeChat mini programs

The above is the detailed content of WeChat mini program advertising custom component--media audio playback component audio. For more information, please follow other related articles on the PHP Chinese website!