小程序组件（八）利用API函数创建音频上下文&&音频上下文对象的使用&&audio音频组件的使用

利用API函数创建音频上下文、使用 音频上下文控制音频播放等功能

<!--pages/audio/audio.wxml-->
<view class='box'>
  <view class='title'>音频展示</view>
  <audio id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls loop></audio>
  <view class="btnLayout">
    <button bindtap="audioPlay">播放</button>
    <button bindtap="audioPause">暂停</button>
    <button bindtap="audio14">设置当前播放时间为14秒</button>
    <button bindtap="audioStart">回到开头</button>
  </view>
</view>

<audio id="myAudio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls loop></audio>

音频组件一定要指定id号，这样在js文件中就可以创建它的上下文，从而实现音频的控制，poster封面，name歌名，author歌手名，src歌曲源文件， controls是否显示控件，默认为true， loop是否循环播放，默认为true

// pages/zj/audio/audio.js
Page({
  data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000', //音频封面的图片资源地址
    name: '歌曲名',
    author: '歌手名',
    src: 'http://sc1.111ttt.cn/2017/1/11/11/304112002347.mp3',
  },

  onLoad: function (options) {
    // 页面初始化, options为页面跳转所带来的参数
    this.audioCtx = wx.createAudioContext('myAudio')  //创建音频上下文
  },
  audioPlay: function () {
    this.audioCtx.play()  //播放音频
  },
  audioPause: function () {
    this.audioCtx.pause()  //暂停播放
  },
  audio14: function () {
    this.audioCtx.seek(14)  //播放位置移动到14秒
  },
  audioStart: function () {
    this.audioCtx.seek(0)   //播放位置移动到开始
  }  
})

src文件地址取自http://www.333ttt.com/up/   　　21　　岑宁儿 - 追光者.mp3

this.audioCtx = wx.createAudioContext('myAudio') //利用createAudioContext API函数创建音频上下文，参数是音频组件的id号

/* pages/audio/audio.wxss */

button {
  margin-top: 50rpx;
  width: 500rpx;
}

.btnLayout {
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center; /* 沿交叉轴方向居中对齐 */
}

 

创建音频上下文的API函数

　　利用API函数AudioContext wx.createAudioContext(string id, Object this) 可以创建音频上下文。

　　参数id是audio 组件的 id， this是指在自定义组件下的当前组件实例。

　　返回值AudioContext表示音频上下文对象。

音频上下文对象

　　音频上下文对象AudioContext具有如下函数：

　　

audio音频组件

　　用于创建音频上下文实例、指定音频源、控制音频播放、 设置音频外观和触发音频事件等。其主要属性如下所示：