title: audio 音频 header: develop nav: component sidebar: media_audio

webUrl: https://qft12m.smartapps.cn/component/audio/audio

解释：音频

属性说明

属性名 类型 默认值 必填 说明
id String 否 audio 组件的唯一标识符
src String 否 要播放音频的资源地址
loop Boolean false 否 是否循环播放
controls Boolean false 否 是否显示默认控件
poster String 否 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name String 未知音频 否 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author String 未知作者 否 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
binderror EventHandle 否 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
bindplay EventHandle 否 当开始/继续播放时触发play事件，detail = {duration}
bindpause EventHandle 否 当暂停播放时触发 pause 事件，detail = {duration}
bindtimeupdate EventHandle 否 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended EventHandle 否 当播放到末尾时触发 ended 事件，detail = {duration}

MediaError.code

返回错误码 描述
1 获取资源过程被用户终止
2 网络错误
3 当解码时发生错误
4 不支持音频

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/audio/audio - 图1 请使用百度APP扫码

代码示例

在开发者工具中预览效果

:::codeTab

  1. <audio poster="{{poster}}" 
  2.     name="{{name}}" 
  3.     loop="false" 
  4.     author="{{author}}" 
  5.     src="{{src}}" 
  6.     id="myAudio" 
  7.     controls 
  8.     bind:error="error" 
  9.     bind:play="audioPlay" 
  10.     bind:pause="audioPause" 
  11.     bind:timeupdate="timeupdate" 
  12.     bind:ended="audioEnded"
  13. >
  14. </audio>
  1. Page({
  2.     data: {
  3.         poster: 'https://c.hiphotos.baidu.com/super/pic/item/8b13632762d0f703e34c0f6304fa513d2797c597.jpg',
  4.         name: '演员',
  5.         author: '薛之谦',
  6.         src: 'https://vd3.bdstatic.com/mda-ic7mxzt5cvz6f4y5/mda-ic7mxzt5cvz6f4y5.mp3'
  7.     },
  8.     error: function (e) {
  9.         console.log('audio error:', e);
  10.         swan.showToast({
  11.             title: '加载音频资源出错',
  12.             duration: 1000
  13.         });
  14.     },
  15.     audioPlay: function (e) {
  16.         console.log('audio play');
  17.         swan.showToast({
  18.             title: '音频开始播放',
  19.             duration: 1000
  20.         });
  21.     },
  22.     audioPause: function (e) {
  23.         console.log('audio pause');
  24.         swan.showToast({
  25.             title: '音频暂停',
  26.             duration: 1000
  27.         });
  28.     },
  29.     audioEnded: function () {
  30.         console.log('audio ended');
  31.         swan.showToast({
  32.             title: '音频播放完',
  33.             duration: 1000
  34.         });
  35.     },
  36.     timeupdate: function () {
  37.         console.log('audio update');
  38.     }
  39. });

:::