audio 音频

简介

音频组件。

基础库 6.4.0 版本起支持使用 dlt.createAudioContext 对 audio 组件进行操作。

使用限制

基础库从 6.4.0 或更高版本支持。
IDE 从 0.15.0 或更高版本支持。

属性

属性名	类型	默认值	必填	说明	最低版本
src	string		是	要播放音频的资源地址，支持网络路径、本地路径	6.4.0
loop	boolean	false	否	是否循环播放	6.4.0
muted	boolean	false	否	是否静音播放	6.4.0
controls	boolean	true	否	是否显示默认播放控件	6.4.0
autoplay	boolean	false	否	是否自动播放	6.4.0
bindplay	eventhandle		否	当开始/继续播放时触发 play 事件	6.4.0
bindpause	eventhandle		否	当暂停播放时触发 pause 事件	6.4.0
bindended	eventhandle		否	当播放到末尾时触发 ended 事件	6.4.0
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	6.4.0
bindwaiting	eventhandle		否	音频出现缓冲时触发	6.4.0
binderror	eventhandle		否	音频播放出错时触发	6.4.0
bindprogress	eventhandle		否	加载进度变化时触发，只支持一段加载。	6.4.0
bindloadedmetadata	eventhandle		否	音频元数据加载完成时触发。event.detail = {width, height, duration}，width、height 为控件元素内部宽高	6.4.0
bindcontrolstoggle	eventhandle		否	切换 controls 显示隐藏时触发。	6.4.0
bindseekcomplete	eventhandle		否	seek 完成时触发	6.4.0
bindmutedchange	eventhandle		否	音频静音变化时触发，event.detail = {muted: true}，muted 为 true 时表示当前音频静音，false 时表示未静音	6.4.0

使用示例

 <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("当前音频是否静音：",evnet.detail.muted)
  }
});

/**
* event 示例：
    {
      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",
    }
*/