微信小程序 （组件---媒体）

常用媒体组件
audio音频组件
camera系统相机组件
image图片组件
video视频组件

媒体组件-音频

audio音频控件
注意：1.6.0版本开始，该组件不再维护，建议使用能力更强的 wx.createInnerAudioContext 接口

  data: {    srcVal:'http://sc1.111ttt.cn:8281/mp3/bd5aa03a789f181cdc5e4eba633b4db9/2018/1/03/13/396131229550.mp3',
    posterVal:'/image/swiper_one.jpg',
    nameVal:'最美的期待',
    authorVal:'周笔畅'
  },

渲染结果：

audio音频属性列表—基础属性

audio音频属性列表—事件绑定属性

audio音频操控，接下来添加播放与暂停按钮


接下来定义JS逻辑脚本部分，操控音频
audio音频操控
第一步：获取音频上下文实例，并绑定给变量

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function (option) {
    /* 使用wx.createAudioContext 获取 audio 上下文 context */
    this.audioCtx=wx.createAudioContext('audioId');
  },

第二步：通过音频上下文实例来操作对应音频

 /* 播放 */
  audioPlay(){
    this.audioCtx.play();
  },
  /* 暂停 */
  audioPause(){
    this.audioCtx.pause();
  },

audio音频操控，接下来添加其他功能
设置当前播放时间功能

<button bindtap="startFn">直接20秒开始</button>

  startFn(){
    this.audioCtx.seek(20);
  },

此时，点击按钮时便会快速跳跃至第20秒，如果seek方法传参为0时，则会跳转到音频开头。

设置当前播放时间为开头


audio音频事件绑定属性验证
bindplay开始+bindpause暂停