微信小程序案例2.2 图片与声音开发实践

一、案例简介本案例使用 image 图片组件与InnerAudioContext音频 API 完成多媒体开发。基础功能点击宝塔山图片控制音频播放与暂停。在基础功能之上进行功能扩展第一设置两个横向并列独立按钮分别实现 0.75 倍慢速播放、2 倍快速播放第二每次执行播放、暂停操作时在控制台打印音频当前播放位置与播放速率。通过本案例掌握图片点击事件、小程序音频上下文 API、音频倍速设置以及控制台日志调试的开发思路理解小程序多媒体资源加载与事件驱动视图的核心思想。二、组件原理image 图片组件用于页面图片渲染bind:tap绑定点击事件点击图片触发自定义函数modewidthFix保持图片原始宽高比例自适应容器宽度。wx.createInnerAudioContext() 音频上下文 API小程序原生音频接口用来创建音频实例实现音频资源加载、播放控制。playbackRate属性音频播放速率0.75 代表慢速2.0 代表快速play()音频播放方法pause()音频暂停方法currentTime获取音频当前播放位置单位为秒console.log()向开发者调试控制台输出日志查看运行参数满足作业要求播放、暂停时打印播放位置、播放速率。flex 弹性布局利用 flex 实现页面元素垂直居中两个倍速按钮横向并排设置间距美化页面布局。三、实现思路页面生命周期onLoad加载时创建音频实例innerAudioContext加载本地音频资源初始化播放速率为 1 倍速并添加音频错误监听捕获音频加载异常。给 image 图片绑定点击事件sing使用布尔变量标记音频状态点击切换播放/暂停每次播放或者暂停在控制台打印当前播放位置与播放速率。使用 view 容器包裹两个按钮采用 flex 横向布局实现按钮并排展示按钮分别绑定setSlowSpeed、setFastSpeed函数。点击慢速按钮音频倍速设置为 0.75点击快速按钮音频倍速设置为 2.0切换倍速同时控制台输出当前倍速。全局样式 app.wxss 统一页面布局使用 flex 布局实现内容居中设置盒子边框、标题样式调整按钮尺寸与按钮之间间距。四、核心代码index.wxml!--index.wxml-- navigation-bar title图片与声音 back{{false}} colorblack background#FFF/navigation-bar view classbox container view classtitle宝塔山/view image src{{imgSrc}} modewidthFix bind:tapsing / view classbtn-group button bind:tapsetSlowSpeed慢速/button button bind:tapsetFastSpeed快速/button /view /viewindex.jslet innerAudioContext; let start false; Page({ data: { imgSrc: https://636c-cloud1-d2g9ufr6x6215bf88-1505294785.tcb.qcloud.la/images/yanan.webp?sign836c4defe472d0ad8042da4bffc340e4t1791893214, playbackRate:1.0 }, onLoad() { innerAudioContext wx.createInnerAudioContext() innerAudioContext.src https://636c-cloud1-d2g9ufr6x6215bf88-1505294785.tcb.qcloud.la/audios/huiyanan.mp3?signf9aa64dfa5e70820f75d73d2c180a85ct1791893238 innerAudioContext.playbackRate this.data.playbackRate innerAudioContext.onError((res) { console.log(音频错误, res) }) }, sing() { start !start if (start true) { innerAudioContext.play() console.log(播放当前位置(秒),innerAudioContext.currentTime,播放速率,innerAudioContext.playbackRate) } else { innerAudioContext.pause() console.log(暂停当前位置(秒),innerAudioContext.currentTime,播放速率,innerAudioContext.playbackRate) } }, setSlowSpeed(){ innerAudioContext.playbackRate 0.75 this.setData({playbackRate:0.75}) console.log(设置慢速当前播放速率,innerAudioContext.playbackRate) }, setFastSpeed(){ innerAudioContext.playbackRate 2.0 this.setData({playbackRate:2.0}) console.log(设置快速当前播放速率,innerAudioContext.playbackRate) } })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; } .btn-group{ display: flex; flex-direction: row; gap:40rpx; margin-top:20rpx; } .btn-group button{ width:240rpx; }app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }五、运行效果页面加载完成展示红色加粗居中标题“宝塔山”与宝塔山图片页面整体居中盒子带有粉色边框。点击图片音频开始播放再次点击图片音频暂停。每次执行播放、暂停操作控制台打印音频当前播放位置单位秒和当前播放速率。图片下方两个按钮横向并排中间留有间距。点击【慢速(0.75倍)】音频切换 0.75 倍慢速点击【快速(2倍)】音频切换 2 倍快速控制台输出更新后的播放速率。六、知识点总结本案例涉及的核心知识点如下image 组件点击事件通过bind:tap绑定点击事件实现图片交互控制。InnerAudioContext 音频API使用wx.createInnerAudioContext()创建音频实例通过play()、pause()控制播放与暂停。音频倍速控制通过playbackRate属性设置播放速率0.75 为慢速2.0 为快速。音频播放位置获取通过currentTime获取当前播放时间单位秒。控制台日志调试使用console.log()输出播放位置、播放速率等运行参数辅助程序调试。本地资源引用图片、音频使用本地相对路径避免云存储签名链接过期导致 403 加载失败。flex 弹性布局实现页面元素垂直居中、倍速按钮横向并排并设置间距。