微信小程序实战图片与声音image组件 InnerAudioContext 音频播放本文对应教材《案例 2.2 图片与声音》完整记录如何在小程序中使用 image 组件展示图片、使用 InnerAudioContext 控制音频的播放与暂停并扩展播放速度控制与播放信息打印功能。一、案例效果小程序界面上显示一幅图片延安宝塔山点击图片时播放音乐再次点击暂停再次点击又播放如此交替下方提供慢速 / 正常 / 快速按钮控制播放速度每次播放或暂停时在控制台打印当前播放位置与播放速率。二、为什么用云存储微信小程序对包体积有限制单个主包不能超过2M。图片、音频这类资源体积较大本例中 huiyanan.mp3 约 4.5M如果直接打包进小程序会超出体积限制。因此把图片和音频上传到云存储在代码里通过网络地址引用从而减小小程序包体积。三、新建项目与基础配置新建一个不使用云服务、不使用模板的小程序项目。1. 修改 app.json将渲染引擎改为webviewSkyline 对本例不适用{pages:[pages/index/index],window:{navigationBarTextStyle:black,navigationStyle:custom},style:v2,renderer:webview,componentFramework:glass-easel,sitemapLocation:sitemap.json,lazyCodeLoading:requiredComponents}2. 开通云开发并上传资源点击开发者工具上方的云开发按钮开通环境切换到存储分别创建images、audios文件夹把yanan.webp上传到images、把huiyanan.mp3上传到audios。单击文件右侧复制下载地址得到两个网络地址。本地调试时如果地址未配置合法域名可在详情 → 本地设置中勾选不校验合法域名等价于project.private.config.json里urlCheck: false。四、页面结构 index.wxml使用image组件展示图片src通过数据绑定{{imgSrc}}赋值bind:tapsing绑定点击事件下方放三个速度按钮!--index.wxml--navigation-bartitle图片与声音back{{false}}colorblackbackground#FFF/navigation-barviewclassbox containerviewclasstitle宝塔山/viewimagesrc{{imgSrc}}modewidthFixbind:tapsing/viewclassspeed-rowbuttonsizeminibindtapsetSlow慢速/buttonbuttonsizeminibindtapsetNormal正常/buttonbuttonsizeminibindtapsetFast快速/button/view/view要点src{{imgSrc}}数据绑定把data.imgSrc的值赋给图片地址modewidthFix图片宽度撑满高度按原图比例自动计算bind:tapsing点击图片时调用页面里的sing()方法。五、逻辑 index.js模块级变量保存音频上下文和播放状态onLoad是页面生命周期函数页面加载时只调用一次在这里创建音频实例并设置地址sing()通过取反start实现播放/暂停交替。// index.jsletinnerAudioContext;letstartfalse;Page({data:{imgSrc:https://你的云存储地址/images/yanan.webp},onLoad(){innerAudioContextwx.createInnerAudioContext()innerAudioContext.srchttps://你的云存储地址/audios/huiyanan.mp3},sing(){start!startif(starttrue){innerAudioContext.play()}else{innerAudioContext.pause()}// 功能扩展打印当前播放位置与播放速率console.log(播放位置 currentTime ,innerAudioContext.currentTime,秒)console.log(播放速率 playbackRate ,innerAudioContext.playbackRate,倍)},setSlow(){innerAudioContext.playbackRate0.5this.setData({rate:0.5})console.log(已设置为慢速播放速率 ,innerAudioContext.playbackRate)},setNormal(){innerAudioContext.playbackRate1this.setData({rate:1})console.log(已设置为正常速度播放速率 ,innerAudioContext.playbackRate)},setFast(){innerAudioContext.playbackRate1.5this.setData({rate:1.5})console.log(已设置为快速播放速率 ,innerAudioContext.playbackRate)}})核心 APIwx.createInnerAudioContext()创建内部音频上下文innerAudioContext.src设置音频地址innerAudioContext.play()/pause()播放 / 暂停innerAudioContext.playbackRate播放速率0.5 慢速、1 正常、1.5 快速innerAudioContext.currentTime当前播放位置秒。六、样式index.wxss/**index.wxss**/page{height:100vh;display:flex;flex-direction:column;}app.wxss全局样式/**app.wxss**/.container{display:flex;flex-direction:column;align-items:center;box-sizing:border-box;}.box{margin:20rpx;padding:20rpx;border:2rpx solid pink;}.title{font-size:larger;font-weight:bolder;text-align:center;margin-bottom:30rpx;color:red;}.speed-row{margin-top:20rpx;display:flex;flex-direction:row;justify-content:space-around;width:100%;}七、运行效果编译后模拟器中顶部显示图片与声音导航栏粉色边框内是红色宝塔山标题与图片点击图片播放音乐、再次点击暂停点击慢速 / 正常 / 快速切换播放速度打开调试器 Console每次播放或暂停都会打印类似播放位置 currentTime 12.34 秒 播放速率 playbackRate 1.5 倍八、小结本例串联了小程序的几个基础知识点image 组件与mode属性、数据绑定{{imgSrc}}事件绑定bind:tap与页面方法InnerAudioContext创建、播放、暂停音频onLoad 生命周期页面加载时初始化音频云存储存放大体积资源以绕过 2M 包体积限制扩展通过playbackRate控制语速、通过currentTime/playbackRate在控制台打印播放状态。— END —