图片, 视频, 音乐是小程序使用中不可缺少的部分, 这篇文章中, 我们将介绍小程序媒体组件的使用. 媒体组件分为 audio 音频组件, image 图像组件, video 视频组件, camera 相机组件以及 live-player,live-pusher 小程序直播组件. 其中直播权限需要相关资质的账号才能开通, 本文暂不做介绍. 其他组件我们将会以 Hello World 的 demo 形式做介绍.
Hello World - audio 音频组件
音频组件需要调用 wx.createInnerAudioContext() 接口使用, 我们使用其他组件来调用 wx.createInnerAudioContext() 内部的函数, 来实现对 audio 组件的播放暂停下一曲等操作的调用. 首先, 先看看代码, 修改 index.wxml 文件内容, 如下.
- <view>
- <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}"
- id="myAudio" controls loop>
- </audio>
- </view>
- <button type="primary" bindtap="audioPlay" size="mini">
- 播放
- </button>
- <button type="primary" bindtap="audioPause" size="mini">
- 暂停
- </button>
- <button type="primary" bindtap="audio30" size="mini">
- 设置当前播放时间为 30 秒
- </button>
- <button type="primary" bindtap="audioStart" size="mini" type='warn'>
- 回到开头
- </button>
之后, 修改 index.JS 文件内容如下.
- Page({
- onReady: function (e) {
- // 使用 wx.createAudioContext 获取 audio 上下文 context
- this.audioCtx = wx.createAudioContext('myAudio')
- },
- data: {
- poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001SnFff46yErZ.jpg?max_age=2592000',
- name: 'Wake up!',
- author: 'AAA',
- src: 'http://isure.stream.qqmusic.qq.com/C400000CeOtG4A2fVk.m4a?guid=8598236233&vkey=244CBD2B8FB54437CEEA6EE55F6376D829BF6670E763662CB00F2258EC7E47C521C31C67C761DF114023E637662C5CB2108BFFE7EF41782E&uin=1589&fromtag=66',
- },
- audioPlay: function () {
- this.audioCtx.play()
- },
- audioPause: function () {
- this.audioCtx.pause()
- },
- audio30: function () {
- this.audioCtx.seek(30)
- },
- audioStart: function () {
- this.audioCtx.seek(0)
- }
- })
- 1541574223613
通过上述代码, 你就可以实现一个小的播放器功能, 先看看官方文档, 然后我们在介绍下代码的意思.
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
id | String | audio 组件的唯一标识符 | |
src | String | 要播放音频的资源地址 | |
loop | Boolean | false | 是否循环播放 |
controls | Boolean | false | 是否显示默认控件 |
poster | String | 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 | |
name | String | 未知音频 | 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效 |
author | String | 未知作者 | 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效 |
binderror | EventHandle | 当发生错误时触发 error 事件,detail = {errMsg: MediaError.code} | |
bindplay | EventHandle | 当开始 / 继续播放时触发 play 事件 | |
bindpause | EventHandle | 当暂停播放时触发 pause 事件 | |
bindtimeupdate | EventHandle | 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration} | |
bindended | EventHandle | 当播放到末尾时触发 ended 事件 |
首先, 必须填的内容有 id,scr, 因为我们要通过 wx.createAudioContext() 函数去获取当前播放器的 id, 获取 id 后, 我们的 API 才能通过 scr 给出的音频地址播放当前的音频.
- <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
- <view class="section__title">
- {{item.text}}
- </view>
- <image mode="{{item.mode}}" src="https://source.unsplash.com/random/1600x900">
- </image>
- </view>
- Page({
- data: {
- array: [{
- mode: 'scaleToFill',
- text: 'scaleToFill: 不保持纵横比缩放图片, 使图片完全适应'
- }, {
- mode: 'aspectFit',
- text: 'aspectFit: 保持纵横比缩放图片, 使图片的长边能完全显示出来'
- }, {
- mode: 'aspectFill',
- text: 'aspectFill: 保持纵横比缩放图片, 只保证图片的短边能完全显示出来'
- }, {
- mode: 'top',
- text: 'top: 不缩放图片, 只显示图片的顶部区域'
- }, {
- mode: 'bottom',
- text: 'bottom: 不缩放图片, 只显示图片的底部区域'
- }, {
- mode: 'center',
- text: 'center: 不缩放图片, 只显示图片的中间区域'
- }, {
- mode: 'left',
- text: 'left: 不缩放图片, 只显示图片的左边区域'
- }, {
- mode: 'right',
- text: 'right: 不缩放图片, 只显示图片的右边边区域'
- }, {
- mode: 'top left',
- text: 'top left: 不缩放图片, 只显示图片的左上边区域'
- }, {
- mode: 'top right',
- text: 'top right: 不缩放图片, 只显示图片的右上边区域'
- }, {
- mode: 'bottom left',
- text: 'bottom left: 不缩放图片, 只显示图片的左下边区域'
- }, {
- mode: 'bottom right',
- text: 'bottom right: 不缩放图片, 只显示图片的右下边区域'
- }]
- },
- })
- <view class="section tc">
- <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls></video>
- <view class="btn-area">
- <input bindblur="bindInputBlur"/>
- <button bindtap="bindSendDanmu"> 发送弹幕 </button>
- </view>
- </view>
- function getRandomColor () {
- let rgb = []
- for (let i = 0 ; i <3; ++i) {
- let color = Math.floor(Math.random() * 256).toString(16)
- color = color.length == 1 ? '0' + color : color
- rgb.push(color)
- }
- return '#' + rgb.join('')
- }
- Page({
- onReady (res) {
- this.videoContext = wx.createVideoContext('myVideo')
- },
- inputValue: '',
- bindInputBlur (e) {
- this.inputValue = e.detail.value
- },
- bindSendDanmu () {
- this.videoContext.sendDanmu({
- text: this.inputValue,
- color: getRandomColor()
- })
- }
- })
- 1541580544205
- <view class="page-body">
- <view class="page-body-wrapper">
- <camera
- flash="{{flash}}"
- device-position="{{position}}"
- binderror="error"
- >
- </camera>
- <text > 当前闪光灯状态:{{flash}}</text>
- <view class="btn-area first-btn">
- <view class="btn-area">
- <button type="primary" bindtap="toggleflash"> 切换闪光灯状态 </button>
- </view>
- <button type="primary" bindtap="togglePosition"> 切换摄像头 </button>
- </view>
- <view class="btn-area">
- <button type="primary" bindtap="takePhoto"> 拍照 </button>
- </view>
- <view class="btn-area">
- <button type="primary" bindtap="startRecord"> 开始录像 </button>
- </view>
- <view class="btn-area">
- <button type="primary" bindtap="stopRecord"> 结束录像 </button>
- </view>
- <view class="preview-tips"> 预览 </view>
- <image wx:if="{{src}}" mode="widthFix" class="photo" src="{{src}}"></image>
- <video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
- </view>
- </view>
- Page({
- onShareAppMessage() {
- },
- data: {
- src: '',
- videoSrc: '',
- position: 'back',
- mode: 'scanCode',
- result: {},
- flash : 'on'
- },
- onLoad() {
- this.ctx = wx.createCameraContext()
- },
- takePhoto() {
- this.ctx.takePhoto({
- quality: 'high',
- success: (res) => {
- this.setData({
- src: res.tempImagePath
- })
- }
- })
- },
- startRecord() {
- this.ctx.startRecord({
- success: () => {
- console.log('startRecord')
- }
- })
- },
- stopRecord() {
- this.ctx.stopRecord({
- success: (res) => {
- this.setData({
- src: res.tempThumbPath,
- videoSrc: res.tempVideoPath
- })
- }
- })
- },
- togglePosition() {
- this.setData({
- position: this.data.position === 'front'
- ? 'back' : 'front'
- })
- },
- toggleflash() {
- this.setData({
- flash: this.data.flash === 'off'
- ? 'on' : 'off'
- })
- },
- error(e) {
- console.log(e.detail)
- }
- })
- <view class="btn-area">
- <button type="primary" bindtap="scanCode"> 扫码 </button>
- </view>
- Page({
- scanCode(){
- wx.scanCode({
- success(res) {
- console.log(res)
- }
- })
- }
- })
来源: https://www.qcloud.com/developer/article/1361259