Develop | wechat applet audio player + API | wx.createaudiocontext

Posted by EviL_CodE on Thu, 30 Apr 2020 21:34:09 +0200

Audio is an audio component of wechat applet, which can easily play / stop audio and other customized actions in the applet.

Attached is the description of the properties of the audio component of the wechat applet:

This time, through the post, name, author, src, id, controls properties of the applet audio, and Related api: wx.createAudioContext To create a simple audio playback control page

Step 1
Open the wechat developer tool, create an applet project, and select the new blank folder. The tool will automatically generate necessary files for you! Then create a folder named audio under pages

Step 2
Then open app.json, add "pages/audio/audio" as shown in the figure below, and write the path of the page to ensure access. After writing, the audio file will generate blank configuration files such as js/json/wxml

Step 3
Post the code directly. audio.json is OK by default
audio.js (audio script file)

// audio.js
  data: {
    poster: '',
    name: 'this moment',
    author: 'Xu Wei',
    src: '',
  onReady: function (e) {
    // Use wx.createAudioContext to get the audio context
    this.audioCtx = wx.createAudioContext('myAudio')
  audioPlay: function () {
  audioPause: function () {
  audio14: function () {
  audioStart: function () {
audio.wxml(audio page structure file)
<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls></audio>
<button class="button-style" bindtap="audioPlay">play</button>
<button class="button-style" bindtap="audioPause">suspend</button>
<button class="button-style" bindtap="audio14">Set the current playback time to 14 seconds</button>
<button class="button-style" bindtap="audioStart">Back to the beginning</button>
audio.wxss(audio page style file)
/* pages/audio/aduio.wxss */
    background-color: #eee;  
    border-radius: 8rpx;  
    margin: 20rpx;  


Topics: JSON