audio - Audio Component

Introduction

audio component.

Starting from version 6.4.0 of the basic library, dlt.createAudioContext is supported to operate on the audio component.

Usage restrictions

The basic library supports version 6.4.0 or higher.
IDE supports version0.15.0 or higher.

Properties

Property Name	Type	Default Value	Required	Description	Minimum Version
src	string		Yes	The resource address of the audio to be played, supports network paths and local paths	6.4.0
loop	boolean	false	No	Whether to loop playback	6.4.0
muted	boolean	false	No	Whether to mute playback	6.4.0
controls	boolean	true	No	Whether to display the default playback controls	6.4.0
autoplay	boolean	false	No	Whether to autoplay	6.4.0
bindplay	eventhandle		No	Trigger a play event when starting/continuing to play	6.4.0
bindpause	eventhandle		No	Trigger a pause event when pausing playback	6.4.0
bindended	eventhandle		No	Trigger an ended event when playing to the end	6.4.0
bindtimeupdate	eventhandle		No	Triggered when the playback progress changes, event.detail = {currentTime, duration}. Trigger frequency is once every 250ms	6.4.0
bindwaiting	eventhandle		No	Triggered when the audio is buffering	6.4.0
binderror	eventhandle		No	Triggered when the audio playback error	6.4.0
bindprogress	eventhandle		No	Triggered when the loading progress changes, only supports one segment loading.	6.4.0
bindloadedmetadata	eventhandle		No	Triggered when the audio metadata is loaded. event.detail = {width, height, duration}, width, height are the internal width and height of the control element	6.4.0
bindcontrolstoggle	eventhandle		No	Triggered when toggling controls display and hide.	6.4.0
bindseekcomplete	eventhandle		No	Triggered when seek is complete	6.4.0
bindmutedchange	eventhandle		No	Triggered when the audio is muted. event.detail = {muted: true}, muted is true when the current audio is muted, and false when it is not muted	6.4.0

Usage Example

 <audio  
  id="myAudio" 
  :src="src" 
  :autoplay="autoplay" 
  :muted="muted"
  :loop="loop"
  :controls="controls"
  bind:bindtimeupdate="bindtimeupdate"
  bind:bindplay="bindplay"
  bind:bindloadedmetadata="bindloadedmetadata"
  bind:bindseeked="bindseeked"
  bind:bindwaiting="bindwaiting"
  bind:bindprogress="bindprogress"
  bind:bindcontrolstoggle="bindcontrolstoggle"
  bind:bindmutedchange="bindmutedchange"
  >
  </audio>

// index.js
Page({
  data: {   
    autoplay:false,
    controls:true,
    muted:true,
    loop:true,
    src:"/images/xxxx.mp3", // "https://xxxx/xxxx.mp3"
  },
  onLoad() {    
      this.audio = dlt.createAudioContext("myAudio")
  },
  bindplay(event) {
    console.log("bindplay",event);
  },
  bindpause(event) {
    console.log("bindpause",event);
  },
  bindended(event) {
    console.log("bindended",event);
  },
  binderror(event) {
    console.log("binderror",event);
  },
  bindtimeupdate(event) {
    console.log("bindtimeupdate",event); 
  },
  bindmutedchange(event){
     console.log("Whether the current audio is muted:",evnet.detail.muted)
  }
});

/**
* event example:
    {
      detail: {
        currentTime: 0.871904,
        duration: 60.095011,
        height: 54,
        width: 300,
      },
      target: {
        dataset: {
          content: "data--detail-content",
          url: "data--url--content",
        },
        id: "myAudio",
      },
      timeStamp: 11574.799999982119,
      type: "timeupdate",
    }
*/