案例 2.2 图片与声音开发实践博客

前言

本次完成微信小程序《案例 2.2 图片与声音》开发，实现图片点击控制音频播放暂停基础功能，并按照作业要求扩展播放速率、控制台打印播放信息，记录完整开发过程、代码与踩坑要点。

一、项目功能说明

1. 页面加载完成后，展示宝塔山图片，点击图片切换音频播放 / 暂停。
2. 基础功能：点击图片播放，再次点击暂停音频。
3. 功能扩展 1：设置音频播放速度为 0.5 倍慢速（playbackRate 属性）。
4. 功能扩展 2：音频播放过程中，控制台实时打印当前音频播放位置、播放速率；每次点击播放 / 暂停时同步打印信息。
5. 页面样式：使用全局 app.wxss 样式，粉色边框容器，红色加粗标题，图片自适应宽度。

二、页面文件结构

pages └── index ├─ index.wxml 页面结构 ├─ index.js 业务逻辑（音频控制） ├─ index.wxss 页面局部样式 └─ index.json 页面配置 app.wxss 全局公共样式

三、完整代码展示

1. index.wxml

<!--index.wxml--> <navigation-bar title="图片与声音" back="{{false}}" color="black" background="#FFF"></navigation-bar> <view class="box container"> <view class="title">宝塔山</view> <image src="{{imgSrc}}" mode="widthFix" bind:tap="sing" /> </view>

2. index.js

// index.js let innerAudioContext; let start = false; Page({ data: { imgSrc: 'https://636c-cloud1-d4g4p0fp362f474fd-1505398098.tcb.qcloud.la/images/yanan.webp?sign=edc21c073ffe11bc36e964aac8d13519&t=1791868474' }, onLoad() { innerAudioContext = wx.createInnerAudioContext() innerAudioContext.src = 'https://636c-cloud1-d4g4p0fp362f474fd-1505398098.tcb.qcloud.la/audios/huiyanan.mp3?sign=553ec07f4d00e3259b2404521357dea3&t=1791868494' // 扩展1：设置播放速度0.5倍慢速 innerAudioContext.playbackRate = 0.5; // 实时监听音频时间更新，持续打印播放信息 innerAudioContext.onTimeUpdate(() => { console.log("当前音频的播放位置：", innerAudioContext.currentTime) console.log("当前音频播放速率：", innerAudioContext.playbackRate) }) }, sing() { start = !start // 布尔取反，每次点击翻转状态：true ↔ false if (start == true) { innerAudioContext.play() } else { innerAudioContext.pause() } // 点击播放/暂停时打印一次信息 console.log("当前音频的播放位置：", innerAudioContext.currentTime) console.log("当前音频播放速率：", innerAudioContext.playbackRate) } })

3. index.wxss

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } image{ width:100%; }

4. 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; }

四、核心知识点说明

1. InnerAudioContext 音频对象：微信小程序音频 API，用于本地 / 网络音频播放控制。
2. playbackRate属性：控制音频播放速率，0.5 代表慢速播放，范围 0.5~2。
3. onTimeUpdate监听事件：音频播放时间发生变化自动触发，用来实时获取播放位置currentTime。
4. 状态标记变量start：布尔变量，用来记录音频播放状态，点击图片切换 true/false，实现播放暂停切换。
5. 全局样式 app.wxss：定义通用 class，全部页面可以直接复用样式，减少重复代码。

五、踩坑要点

1. 域名校验：使用云开发静态资源链接，开发工具需要勾选【不校验合法域名】，否则图片、音频加载失败。
2. 状态不同步问题：音频播放结束后，start变量不会自动重置，下次点击状态会错乱，可以增加onEnded监听重置 start。
3. 控制台日志：onTimeUpdate会高频打印，控制台信息刷新很快，属于正常现象，和作业示例截图效果一致。
4. 样式优先级：app.wxss 全局样式，页面 index.wxss 局部样式，局部样式会覆盖全局同名样式，注意不要冲突。

六、运行效果

1. 进入页面，页面展示粉色边框容器，红色加粗 “宝塔山” 标题，下方显示图片。
2. 点击图片：音频 0.5 倍慢速开始播放，控制台不断输出当前播放位置、播放速率。
3. 再次点击图片：音频暂停，控制台打印暂停瞬间的播放位置与速率。