微信小程序 audio 音频组件

ゞ浴缸里的玫瑰 2021-09-08 06:18 492阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

音频。[1.6.0][]版本开始，该组件不再维护。建议使用能力更强的 [wx.createInnerAudioContext][] 接口

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">id</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">audio 组件的唯一标识符</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">src</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">要播放音频的资源地址</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">loop</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否循环播放</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">controls</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否显示默认控件</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">poster</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">name</td> 
   <td align="left">string</td> 
   <td align="left">未知音频</td> 
   <td align="left">否</td> 
   <td align="left">默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">author</td> 
   <td align="left">string</td> 
   <td align="left">未知作者</td> 
   <td align="left">否</td> 
   <td align="left">默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">binderror</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当发生错误时触发 error 事件，detail = {errMsg:MediaError.code}</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindplay</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当开始/继续播放时触发play事件</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindpause</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当暂停播放时触发 pause 事件</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindtimeupdate</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindended</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当播放到末尾时触发 ended 事件</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**MediaError.code**

<table> 
 <thead> 
  <tr> 
   <th align="left">返回错误码</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">获取资源被用户禁止</td> 
  </tr> 
  <tr> 
   <td align="left">2</td> 
   <td align="left">网络错误</td> 
  </tr> 
  <tr> 
   <td align="left">3</td> 
   <td align="left">解码错误</td> 
  </tr> 
  <tr> 
   <td align="left">4</td> 
   <td align="left">不合适资源</td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

[在开发者工具中预览效果][Link 1]

index.xml

<view class="page">
      <view class="page__hd">
        <text class="page__title">audio</text>
        <text class="page__desc">音频</text>
      </view>
      <view class="page__bd">
        <view class="section section_gap">
          <audio src="{ {current.src}}" poster="{ {current.poster}}" name="{ {current.name}}" author="{ {current.author}}" action="{ {audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
        </view>
      </view>
    
      <view class="section section_gap">
        <text class="section__title">播放</text>
        <view class="body-view">
          <button bindtap="playAudio">播放</button>
        </view>
      </view>
    
      <view class="section section_gap">
        <text class="section__title">暂停</text>
        <view class="body-view">
          <button bindtap="pauseAudio">暂停</button>
        </view>
      </view>
    
      <view class="section section_gap">
        <text class="section__title">进度</text>
        <view class="body-view">
          <slider bindchange="timeSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
        </view>
      </view>
      <view class="section section_gap">
        <text class="section__title">播放速率</text>
        <view class="body-view">
          <slider min="1" max="4" bindchange="playbackRateSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
        </view>
      </view>
    </view>

index.js

Page({ 
      data: { 
        current: { 
          poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
          name: '此时此刻',
          author: '许巍',
          src: 'https://win-web-nf01-sycdn.kuwo.cn/dfec2ffc8e070e96101b21bd804de6e7/60bed777/resource/n1/73/40/4073043717.mp3',
        },
        audioAction: { 
          method: 'pause'
        }
      },
      audioPlayed: function (e) { 
        console.log('audio is played')
      },
      audioTimeUpdated: function (e) { 
        this.duration = e.detail.duration;
      },
    
      timeSliderChanged: function (e) { 
        if (!this.duration)
          return;
    
        var time = this.duration * e.detail.value / 100;
    
        this.setData({ 
          audioAction: { 
            method: 'setCurrentTime',
            data: time
          }
        });
      },
      playbackRateSliderChanged: function (e) { 
        this.setData({ 
          audioAction: { 
            method: 'setPlaybackRate',
            data: e.detail.value
          }
        })
      },
    
      playAudio: function () { 
        this.setData({ 
          audioAction: { 
            method: 'play'
          }
        });
      },
      pauseAudio: function () { 
        this.setData({ 
          audioAction: { 
            method: 'pause'
          }
        });
      }
    })

运行效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[1.6.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[wx.createInnerAudioContext]: https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html
[Link 1]: https://developers.weixin.qq.com/s/NycgqcmS6KYY
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]: /images/20210716/65feece49f7543608c0f48449791b87c.png