《（本科）第6单元-微信小程序多媒体功能展示ppt课件.ppt》由会员分享，可在线阅读，更多相关《（本科）第6单元-微信小程序多媒体功能展示ppt课件.ppt（46页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：第6单元-微信小程序多媒体功能展示教学资源可联系作者：实现技能目标实现技能目标：使用audio组件播放音乐使用audio api播放音乐用video组件播放视频微信小程序在多媒体方面的应用，包含音频播放与录音、视频播放、拍照、摄像等功能。音频播放功能，支持很多的音频格式和操作方式，微信小程序还持续优化视频播放、地图及画布功能，能够支持简单的动画效果。本单元通过几个组件与API来介绍微信小程序多媒体功能的应用。小明同学最近听到了几首很好听的音乐(儿歌)，想要尝试将这些音乐放在自己的小程序中播放，下面介绍如何使用Audio组件播放音乐文件，实现效果如图6-1-1所示。图6-1-1任务素
2、材：音乐mp3文件“小螺号.mp3”、“找朋友.mp3”、“捉泥鳅.mp3”，图片文件“xiaoluohao.jpg”、“zhaopengyou.jpg”、“zhuoniqiu.jpg”。步骤1、新建一个项目，输入项目的信息，项目名称等，如图6-1-2所示。图6-1-2步骤2、打开页面index.wxml，清空此文件附带的代码，接着将音频与图片素材放置到项目文件夹下，如图6-1-3所示。图6-1-3步骤3、打开页面index.wxml，使用组件播放音频文件“小螺号.mp3”。设置组件的src属性，指定需要播放音频文件的路径；设置poster属性，设置音频封面显示图片的路径；设置name、aut
3、hor显示音频名称、作者等信息，如图6-1-4所示。图6-1-4步骤4、在页面index.wxml继续添加代码，实现播放另外两个音频文件“找朋友.mp3”、 “捉泥鳅.mp3”，如图6-1-5所示。图6-1-5关键代码如下：步骤5、保存，调试运行小程序。在音频封面上点击鼠标即可实现播放音频，如图6-1-6所示。图6-1-61组件为音频组件，可以轻松地在小程序中播放音频文件，其中Audio组件各属性说明，如图6-1-7所示。图6-1-72.音频，版本开始，audio组件不再维护。建议使用能力更强的wx.createInnerAudioContext接口，通过使用 wx.createAudioCo
4、ntext 获取 audio 上下文 context，this.audioCtx = wx.createAudioContext(myAudio)，将在下一个任务中学习、介绍。3.小程序中常见的多媒体组件，如图6-1-8所示。序号序号名称名称功能说明功能说明1 1audio音频2 2video视频（v2.4.0 起支持同层渲染）3 3image图片4 4camera系统相机5 5live-player实时音视频播放（v2.9.1 起支持同层渲染）6 6live-pusher实时音视频录制（v2.9.1 起支持同层渲染）7 7voip-room多人音视频对话6-1-81.在小程序中使用audio
5、组件播放喜欢的音乐文件，并设置audio控件上的音频封面,如图6-1-9所示。图6-1-9前面学会了使用Audio组件来播放音乐文件后，现在尝试下另外一种方式，通过使用相关的音频API以实现播放音乐文件，如图6-2-1所示。图6-2-1任务素材：音频文件“小螺号.mp3”。步骤1、新建一个项目，输入项目的信息，项目名称等，如图6-2-2所示。图6-2-2步骤2、打开页面index.wxml，清空此文件附带的代码，接着将音频素材放置到项目文件夹下，如图6-2-3所示。图6-2-3步骤3、在index.wxml页面编写代码，添加3个按钮组件，制作3个控制音频文件播放的按钮，如图6-2-4所示。图6
6、-2-4关键代码如下：播放暂停第10秒播放步骤4、删除pages/index/index.js文件中的所有代码，使用page方法初始化页面，如图6-2-5所示。图6-2-5步骤5、使用page函数初始化index.js页面，自动生成页面生命周期函数控制代码，如图6-2-6所示。图6-2-6步骤6、编写三个按钮单击时的响应事件代码。打开pages/index/index.js页面，找到onReady函数，在此函数中用API编写“创建音频实例”相应代码；接着定义三个函数audioPlay、audioPause、audioTo10实现控制音频播放、暂停、播放时刻等，如图6-2-7所示。图6-2-7关
7、键代码如下： onReady: function () /调用wx.createInnerAudioContext() API来创建InnerAudioContext实例 this.audioCtx = wx.createInnerAudioContext(); /设置InnerAudioContext实例的音频路径 this.audioCtx.src = pages/music/小螺号.mp3 , audioPlay() /音乐播放函数 this.audioCtx.play(); console.log(音乐播放); , audioPause() /音乐暂停函数 this.audioCtx.
8、pause(); console.log(音乐暂停); , audioTo10() /第10秒开始 this.audioCtx.seek(10); this.audioCtx.play(); console.log(第10秒开始播音乐！); ,步骤7、保存，调试运行小程序。点击模拟器视图中的播放按钮即可播放音乐文件,如图6-2-8所示。图6-2-81.本任务主要是通过API 调用wx.createInnerAudioContext()来创建出一个音频实例InnerAudioContext，然后通过操作音频实例InnerAudioContext来实现控制播放音乐。2. 通过wx.createIn
9、nerAudioContext创建的音频实例常用属性有src、startTime、autoplay、loop等。（1）string src，音频资源的地址，用于直接播放。（2）number startTime，开始播放的位置（单位是s），默认为 0。（3）boolean autoplay，是否自动开始播放，默认为 false。（4）boolean loop，是否循环播放，默认为 false。（5）boolean obeyMuteSwitch，是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。从 2.3.0 版本开始此参数不生效，使用
10、wx.setInnerAudioOption 接口统一设置。（6）number volume，音量，范围 01，默认为 1。（7）number playbackRate，播放速度，取值范围，默认为 1。（8）number duration，当前音频的长度（单位是秒）。（9）number currentTime，当前音频的播放位置（单位是秒）。（10）boolean paused，当前是是否暂停或停止状态（单位是秒）3. 微信小程序innerAudioContext本地音频播放文件路径不支持相对路径innerAudioContext.src = ./music/1.mp3;应该使用绝对路径inn
11、erAudioContext.src = pages/music/1.mp3。4. 通过 wx.createInnerAudioContext 接口获取音频实例，音频播放过程中，可能被系统中断，可通过 wx.onAudioInterruptionBegin、wx.onAudioInterruptionEnd事件来处理这种情况。5.InnerAudioContext常用方法。（1）InnerAudioContext.play()播放（2）InnerAudioContext.pause()暂停。暂停后的音频再播放会从暂停处开始播放（3）InnerAudioContext.stop()停止。停止后的
12、音频再播放会从头开始播放。（4）InnerAudioContext.seek(number position)跳转到指定位置（5）InnerAudioContext.destroy()销毁当前实例1.通过InnerAudioContext常用方法play、stop、pause、seek控制音频播放、停止、暂停、播放位置等，效果如图6-2-9。图6-2-9小明同学最近在制作微信小程序项目，在项目里面需要播放短视频，下面尝试在微信小程序中使用组件实现播放视频文件，以及学习借助API函数wx.chooseVideo()选择需要播放的视频文件,实现效果如图6-3-1所示。图6-3-1任务素材：视频文件
13、“小螺号.mp4”、“找朋友.mp4”、“捉泥鳅.mp4”。步骤1、新建一个项目，输入项目的信息，项目名称等，如图6-3-2所示图6-3-2步骤2、打开页面index.wxml，清空此文件附带的代码；接着将视频素材放置到项目文件夹下，如图6-3-3所示。图6-3-3步骤3、在index.wxml页面编写代码，添加1个视频组件，1个按钮组件，如图6-3-4所示。图6-3-4步骤4、删除pages/index/index.js文件中的所有代码，使用page方法初始化页面，如图6-3-5所示。图6-3-5步骤5、用page函数初始化index.js页面，自动生成页面生命周期函数控制代码，如图6-3-
14、6所示。图6-3-6步骤6、在index.js中的Page内定义一个函数chooseVideo()，用来选择播放的视频文件，代码如图6-3-7所示。图6-3-7关键代码如下： chooseVideo() var that = this; wx.chooseVideo( / 视频选择来源(本地选择和拍照) sourceType: album, camera, / 拍摄视频最长拍摄时间，单位秒 maxDuration: 60, / 默认拉起后置摄像头 camera: back, success(res) console.log(res.tempFilePath) /将临时存储的视频路径赋值给本地变
15、量 that.setData( videoUrl: res.tempFilePath ) ) ,步骤7、保存项目文件，并在模拟器视图中点击“选择视频”按钮，选择素材文件夹中(本地文件夹也可以)的视频素材文件后，接着点击播放按钮，即可实现播放视频，如图6-3-8所示。图6-3-8步骤8、保存，调试运行小程序。点击模拟器视图中的播放按钮即可播放视频的效果,如图6-3-9所示。图6-3-91.小程序的video组件有许多属性可以设置，可以通过查阅微信小程序官方文档来进行学习。2.video组件中的src属性不支持本地路径，但是支持本地临时路径，所以案例中通过API函数wx:chooseVideo()
16、来得到一个视频的本地临时路径，具体说明如图6-3-10所示。图6-3-103.若需要让此项目上线运行的话，则需发布该项目，当提示代码包太大时，请将“/video1/视频”文件夹下的视频素材删掉即可，不然会提示代码包超过限制的大小，如图6-3-11所示。图6-3-111.通过真机调试播放视频的功能， 在手机上测试该案例，制作微信小程序播放手机拍摄的视频文件。2. 制作微信小程序播放视频文件功能，具体包括选择视频文件、开始播放、暂停播放等功能控制，效果如图6-3-12。图6-3-12通过本单元学习，主要了学习微信小程序中的几个媒体组件和API的使用，为后面自主查看官方文档使用更多的组件和API函数打下了良好的基础。 谢谢大家谢谢大家