从零开始学微信小程序开发：8 多媒体

8.1 用audio组件播放音乐

     常用的属性：

• id：在页面中的唯一标识符
• src：资源地址
• loop：是否循环播放
• controls：是否显示默认控件
• poster：音频封面的图片资源地址
• name：名字
• author：作者名字
• binderror：发生错误触发error事件，detail = {errMsg：MediaError.code}
• bindplay：开始或继续播放时触发play事件
• bindpause：暂停
• bindtimeupdate：进度改变，detail = { currentTime, duration}
• bindended：到末尾时

    控制audio组件：通过wx.createAudioContext获取界面中的audio组件

          wx.createAudioContext(audioId)

    创建audio子目录

<!--pages/audio/audio.wxml-->
<view class="page">
  <view class="page_hd">
    <text class="page_title">audio音频</text>
  </view>
  <view class="page_bd">
    <view class="section section_gap" style="text-align: center;">
      <audio id="audio1" src="{{current.src}}" poster="{{current.poster}}"
        name="{{current.name}}" author="{{current.author}}"
        action="{{audioAction}}" controls >
      </audio>
    </view>
    <button type="primary" bindtap="audioPlay">播放</button>
    <button type="primary" bindtap="audioPause">暂停</button>
    <button type="primary" bindtap="audio20">播放时间为20秒</button>
    <button type="primary" bindtap="audioStart">回到开头</button>
  </view>
</view>

  onReady: function () {
    //获取audio上下文context
    this.adContr = wx.createAudioContext('audio1');
  },
  //播放
  audioPlay: function() {
    this.adContr.play()
  },
  //暂停
  audioPause: function() {
    this.adContr.pause()
  },
  //定位
  audio20: function() {
    this.adContr.seek(20)
  },
  //起始位置
  audioStart: function() {
    this.adContr.seek(0)
  },

8.2 使用audio API播放音乐

    1、播放背景音乐wx.playBackgroundAudio：只能有一首处于播放状态

• dataUrl：链接
• title：标题
• coverImgUrl：封面图片
• success:
• fail:
• complete

    2、暂停播放音乐wx.pauseBackgroundAudio不需要参数

    3、停止播放音乐wx.stopBackgroundAudio不需要参数

    4、获取音乐播放状态wx.getBackgroundAudioPlayerState

         success：回调函数，传入Object参数

• duration：音频长度，单位为秒
• currentPosition：当前位置，单位为秒
• status：2（无音乐），1（播放中），0（暂停中）
• downloadPercent：下载进度
• dataUrl：歌曲数据链接

     5、音乐监听器：

• 监听播放：wx.onBackgroundAudioPlay(CALLBACK)
• 监听暂停：wx.onBackgroundAudioPause(CALLBACK)
• 监听停止：wx.onBackgroundAudioStop(CALLBACK)

     创建audioapi子目录

 tapPlay: function() {
    wx.playBackgroundAudio({
      dataUrl: 'http://hao.1015600.com/upload/ring/000/967/819ee75eed0ba954e2d5839a7d65bb93.mp3',
      title: '青云志主题曲《浮诛》',
      coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'
    })
  },
  tapPause: function() {
    wx.pauseBackgroundAudio();
  },
  tapSeek: function() {
    wx.seekBackgroundAudio({
      position: 30
    })
  },
  tapStop: function() {
    wx.stopBackgroundAudio();
  },
  tapGetPlayState: function() {
    wx.getBackgroundAudioPlayerState({
      success: function(res) {
        console.log(res)
      }
    })
  },
  onLoad: function (options) {
    wx.onBackgroundAudioPlay(function() {
      console.log('监听音乐播放，开始播放音乐')
    })  
    wx.onBackgroundAudioPause(function() {
      console.log("监听音乐暂停")
    })
    wx.onBackgroundAudioStop(function() {
      console.log('监听音乐停止')
    })
  },

<!--pages/audioapi/audioapi.wxml-->
<view class="page">
  <view class="page_hd">
    <text class="page_title">audio音频</text>
  </view>
  <view class="page_bd">
    <view class="btn-area">
      <button type="primary" bindtap="tapPlay">播放</button>
      <button type="primary" bindtap="tapPause">暂停</button>
      <button type="primary" bindtap="tapSeek">设置播放进度</button>
      <button type="primary" bindtap="tapStop">停止播放</button>
      <button type="primary" bindtap="tapGetPlayState">获取播放状态</button>
    </view>
  </view>
</view>

8.3 用video组件播放视频

    video组件常用的属性：

• src：
• controls：
• danmu-list：设置一个弹幕数组列表
• danmu-btn：是否显示弹幕按钮
• enable-danmu：是否允许展示弹幕
• autoplay:是否自动播放
• bindplay：
• bindpause
• bindended:
• binderror：当发生错误

    获取视频上下文：wx.createVideoContext，主要的方法有play, pause, seek, sendDanmu（发送一个弹幕到屏幕上）

    给视频添加弹幕：

// pages/video/video.js
//生成随机颜色
function getRandomColor() {
  var colorStr = Math.floor(Math.random()* 0xFFFFFF).toString(16);
  //返回格式化的颜色字符串
  return "#"+"000000".substring(0, 6-colorStr) + colorStr;
}
Page({
  inputValue: '', //输入的弹幕值
  /**
   * 页面的初始数据
   */
  data: {
    src: 'http://mvvideo1.meitudata.com.ucdn.cdndo.com/53a100a930b739040.mp4',
    danmuList: [
      {text: '第2s出现的弹幕',
      color: '#ff0000',
      time: 2},
      {
        text: '第5s出现的弹幕',
        color: '#ff00ff',
        time: 5
      },
    ],
  },
  videoErrorCallback: function(e) {
    console.log(e.detail.errMsg)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
     this.videoContext = wx.createVideoContext('myVideo')
  },
  bindInputBlur: function(e) {
      this.inputValue = e.detail.value
  },
  bindSendDanmu: function() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
  videoErrorCallback: function(e) {
     console.log(e.detail.errMsg)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

<!--pages/video/video.wxml-->
<view class="page">
  <view class="page_hd">
    <text class="page_title">video视频</text>
  </view>
  <view class="page_bd">
    <view class="section section_gap" style="text-align: center;">
      <video id="myVideo" src="{{src}}" binderror="videoErrorCallback"
        danmu-list="{{danmuList}}" enable-danmu='true' danmu-btn controls >
      </video>
    </view>
    <view class="btn-area">
       <input placeholder="输入弹幕内容" bindblur="bindInputBlur"/>
       <button bindtap="bindSendDanmu">发送弹幕</button>
    </view>
  </view>
</view>