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

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

8.1 用audio组件播放音乐

     常用的属性：

• id：在页面中的唯一标识符
• src：资源地址
• loop：是否循环播放
• controls：是否显示默认控件
• poster：音频封面的图片资源地址
• name：名字
• author：作者名字
• binderror：发生错误触发error事件，detail = {errMsg&#de}
• 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上下文contextthis.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、音乐监听器：

• 监听播放&#BackgroundAudioPlay(CALLBACK)
• 监听暂停&#BackgroundAudioPause(CALLBACK)
• 监听停止&#BackgroundAudioStop(CALLBACK)

     创建audioapi子目录

 tapPlay: function() {wx.playBackgroundAudio({dataUrl: '.mp3',title: '青云志主题曲《浮诛》',coverImgUrl: ''})},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：当发生错误

    获取视频上下文&#ateVideoContext，主要的方法有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: '.mp4',danmuList: [{text: '第2s出现的弹幕',color: '#ff0000',time: 2},{text: '第5s出现的弹幕',color: '#ff00ff',time: 5},],},videoErrorCallback: function(e) {console.log(Msg)},/*** 生命周期函数--监听页面加载*/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(Msg)},/*** 生命周期函数--监听页面显示*/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>