小程序笔记 -- 媒体组件audio

最新推荐文章于 2022-10-01 22:31:34 发布

有所执着

最新推荐文章于 2022-10-01 22:31:34 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/lljxk2008/article/details/81239881

版权

本文介绍了微信小程序中audio组件的使用，包括controls、loop、poster等属性，并强调了通过wx.createAudioContext和wx.createInnerAudioContext创建音频上下文以实现播放控制的重要性。在分页场景下，发现InnerAudioContext比AudioContext更能有效地处理不同页面的音频播放问题，解决了AudioContext仅在第一页生效的难题。同时，文章指出InnerAudioContext无法同步audio组件的播放状态，而AudioContext可以。

摘要由CSDN通过智能技术生成

组件audio为音频播放组件

<audio controls loop poster='{
  {poster}}' name='{
  {name}}' author='{
  {author}}' src='{
  {src}}' id='audioID'/>

<button size='mini'  bindtap="audioPlay" > 播放</button>
<button bindtap="audioPause" size='mini'>暂停</button>

controls显示音频控制键, 一般都要它为true, 否则啥都看不见

loop循环播放

poster在控制播放键是加的图片

name音频名称

author作者

src音频文件地址

id唯一标识

虽然可以通过播放按钮播放, 但是更多时候需要js来控制播放逻辑

Page({
  data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    name: '此时此刻',
    author: '许巍',
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },

  /**获取 audio上下文audioContext对象 */
  onReady: function () {
    // 使用API: wx.createAudioContext 获取 此音频组件的 上下文对象
    this.audioCtx = wx.createAudioContext(