本次基于微信小程序完成「图片点击切换播放 / 暂停音乐」小案例使用image组件展示图片wx.createInnerAudioContext创建音频上下文实现音频控制资源存放在云开发云存储避免图片、音频占用小程序主包体积同时完成作业拓展设置播放倍速、控制台输出播放位置与播放速率。知识点数据绑定、事件绑定、页面生命周期onLoad、InnerAudioContext 音频 API、云存储资源管理。开发环境微信开发者工具小程序基础库3.17微信云开发云存储一、需求说明页面展示宝塔山图片标题文字红色居中粉色边框包裹内容。点击图片交替播放 / 暂停背景音乐。第一次点击播放再次点击暂停循环切换。拓展需求音频设置慢速播放每次点击播放暂停控制台打印当前播放位置、当前播放速率。图片、音频不上传到本地项目全部托管到云开发云存储减小小程序包体积。为什么图片音频放云存储 微信小程序主包 / 分包限制 2M如果把图片、音频全部放在项目内很容易超出大小限制。放到云存储代码中引用网络 https 地址资源不打包进小程序解决包体积超限问题。二、前期准备云开发上传资源创建小程序项目选择不使用云服务、不使用模板。顶部工具栏点击【云开发】开通云开发环境。进入【存储】→【存储权限】权限设置所有用户可读仅创建者可读写。存储管理新建两个文件夹images存放图片yanan.webp宝塔山图片audios存放音频huiyanan.mp3分别上传图片和音频文件。点击文件复制下载地址https 链接注意⚠️不要复制 FileID。注意如果权限是仅创建者可读下载链接会过期需要定期重新复制链接。三、完整代码实现1.app.json 全局配置开启 webview 渲染引擎注册页面配置自定义导航栏{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass‑easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. pages/index/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 / /view3. pages/index/index.js 业务逻辑// index.js let innerAudioContext; let start false; Page({ data: { imgSrc:https://636c-cloud1-d5gb06pyie8c378a1-1505494893.tcb.qcloud.la/images/yanan.webp?sign582368d3ca4f4cf010e998518bf84391t1791869604 }, onLoad() { innerAudioContext wx.createInnerAudioContext(); innerAudioContext.src https://636c-cloud1-d5gb06pyie8c378a1-1505494893.tcb.qcloud.la/audios/huiyanan.mp3?sign28501cde6f18cd842c642e1fec314f5bt1791869556 innerAudioContext.playbackRate 0.5; }, sing() { start !start; if (start true) { innerAudioContext.play(); } else { innerAudioContext.pause(); } console.log(当前音频的播放位置, innerAudioContext.currentTime); console.log(当前音频播放速率, innerAudioContext.playbackRate); } })4.pages/index/index.wxss 页面局部样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; }5.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; }四、关键 API 知识点总结wx.createInnerAudioContext()创建内部音频上下文用于播放本地或者网络音频play()播放、pause()暂停。 innerAudioContext.src设置音频资源地址网络 / 本地innerAudioContext.playbackRate播放速率范围 0.5‑2实现快放、慢放 innerAudioContext.currentTime获取当前播放位置单位秒 onError(callback)音频异常监听调试排错必备页面生命周期 onLoad(options)页面加载时触发一个页面只会执行一次适合做资源初始化这里我们在 onLoad 里面初始化音频对象。数据绑定 {{变量名}}src{{imgSrc}}把 js 的 data 中数据渲染到 wxml 标签属性。事件绑定 bind:tap函数名给组件绑定点击触摸事件用户点击组件后执行 js 内对应的事件处理函数五、常见踩坑记录排错❌报错Unable to decode audio data无法解码音频原因 1图片链接和音频链接写反把图片当成音频加载。原因 2云存储权限没有设置为「所有用户可读」小程序没有权限读取音频文件。原因 3下载链接过期重新复制云存储下载地址。六、运行效果七、总结本小程序案例使用image组件和InnerAudioContext音频 API实现点击图片交替播放、暂停音频。图片与音频存放在云存储避免小程序包超限。运用数据绑定渲染图片bind:tap绑定点击事件在onLoad生命周期初始化音频对象设置慢速播放点击时控制台打印播放位置和播放速率 
长河君 · 2026/10/14 18:40:39 · 阅读 1.2k 微信小程序实验：图片与声音
本次基于微信小程序完成「图片点击切换播放 / 暂停音乐」小案例使用image组件展示图片wx.createInnerAudioContext创建音频上下文实现音频控制资源存放在云开发云存储避免图片、音频占用小程序主包体积同时完成作业拓展设置播放倍速、控制台输出播放位置与播放速率。知识点数据绑定、事件绑定、页面生命周期onLoad、InnerAudioContext 音频 API、云存储资源管理。开发环境微信开发者工具小程序基础库3.17微信云开发云存储一、需求说明页面展示宝塔山图片标题文字红色居中粉色边框包裹内容。点击图片交替播放 / 暂停背景音乐。第一次点击播放再次点击暂停循环切换。拓展需求音频设置慢速播放每次点击播放暂停控制台打印当前播放位置、当前播放速率。图片、音频不上传到本地项目全部托管到云开发云存储减小小程序包体积。为什么图片音频放云存储 微信小程序主包 / 分包限制 2M如果把图片、音频全部放在项目内很容易超出大小限制。放到云存储代码中引用网络 https 地址资源不打包进小程序解决包体积超限问题。二、前期准备云开发上传资源创建小程序项目选择不使用云服务、不使用模板。顶部工具栏点击【云开发】开通云开发环境。进入【存储】→【存储权限】权限设置所有用户可读仅创建者可读写。存储管理新建两个文件夹images存放图片yanan.webp宝塔山图片audios存放音频huiyanan.mp3分别上传图片和音频文件。点击文件复制下载地址https 链接注意⚠️不要复制 FileID。注意如果权限是仅创建者可读下载链接会过期需要定期重新复制链接。三、完整代码实现1.app.json 全局配置开启 webview 渲染引擎注册页面配置自定义导航栏{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass‑easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. pages/index/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 / /view3. pages/index/index.js 业务逻辑// index.js let innerAudioContext; let start false; Page({ data: { imgSrc:https://636c-cloud1-d5gb06pyie8c378a1-1505494893.tcb.qcloud.la/images/yanan.webp?sign582368d3ca4f4cf010e998518bf84391t1791869604 }, onLoad() { innerAudioContext wx.createInnerAudioContext(); innerAudioContext.src https://636c-cloud1-d5gb06pyie8c378a1-1505494893.tcb.qcloud.la/audios/huiyanan.mp3?sign28501cde6f18cd842c642e1fec314f5bt1791869556 innerAudioContext.playbackRate 0.5; }, sing() { start !start; if (start true) { innerAudioContext.play(); } else { innerAudioContext.pause(); } console.log(当前音频的播放位置, innerAudioContext.currentTime); console.log(当前音频播放速率, innerAudioContext.playbackRate); } })4.pages/index/index.wxss 页面局部样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; }5.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; }四、关键 API 知识点总结wx.createInnerAudioContext()创建内部音频上下文用于播放本地或者网络音频play()播放、pause()暂停。 innerAudioContext.src设置音频资源地址网络 / 本地innerAudioContext.playbackRate播放速率范围 0.5‑2实现快放、慢放 innerAudioContext.currentTime获取当前播放位置单位秒 onError(callback)音频异常监听调试排错必备页面生命周期 onLoad(options)页面加载时触发一个页面只会执行一次适合做资源初始化这里我们在 onLoad 里面初始化音频对象。数据绑定 {{变量名}}src{{imgSrc}}把 js 的 data 中数据渲染到 wxml 标签属性。事件绑定 bind:tap函数名给组件绑定点击触摸事件用户点击组件后执行 js 内对应的事件处理函数五、常见踩坑记录排错❌报错Unable to decode audio data无法解码音频原因 1图片链接和音频链接写反把图片当成音频加载。原因 2云存储权限没有设置为「所有用户可读」小程序没有权限读取音频文件。原因 3下载链接过期重新复制云存储下载地址。六、运行效果七、总结本小程序案例使用image组件和InnerAudioContext音频 API实现点击图片交替播放、暂停音频。图片与音频存放在云存储避免小程序包超限。运用数据绑定渲染图片bind:tap绑定点击事件在onLoad生命周期初始化音频对象设置慢速播放点击时控制台打印播放位置和播放速率