图片与声音（云存储 + 音频播放 + 扩展）

本文面向微信小程序初学者，通过一个「图片与声音」案例，演示如何利用云开发存储突破主包 2M 大小限制。读者将学会 image 组件、InnerAudioContext 音频控制、数据与事件绑定，以及 onLoad 生命周期函数的综合运用，并掌握播放速率与播放位置的调试技巧。

一、案例背景

微信对小程序主包大小限制为 2M。图片、音频这类体积较大的资源如果直接打进包里，很容易超限、无法上传发布。所以这个案例采用云开发存储方案：把图片和 mp3 上传到云存储，小程序里引用它们的网络下载地址，从而有效减小包体积。

本案例要演示的知识点：

• image 组件的使用与数据绑定

• 创建音频上下文并控制播放/暂停

• onLoad 生命周期函数

• 数据和事件绑定

• 图片、音频文件放到云存储

二、实现效果

界面上显示一幅图片（宝塔山），点击图片开始播放音乐，再次点击暂停，再点又播放，依次交替。配合作业扩展，每次点击都会在控制台打印当前播放位置和播放速率。

三、实现步骤

1. 新建项目

新建一个不使用云服务、不使用模板的小程序项目。

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"

}

1. 开通云开发

点击开发者工具顶部工具栏的【云开发】按钮，进入云开发控制台（新用户可免费体验一个基础套餐环境，时长六个月）。

1. 切换到存储并设置权限

点击【存储】，进入后设置存储权限为：所有用户可读（适用于公开的图片、音频）。

1. 上传图片和音频到云存储

• 点击【存储管理】。

• 新建文件夹：audios、images。

• 将本地的图片 yanan.webp、音频 huiyanan.mp3 分别上传到对应文件夹（文件可自己从网上找，或用讲义目录下的）。

1. 获取文件下载地址

单击某个文件名，右侧会显示文件详细信息，点击【下载地址】后的【复制】按钮，得到文件的网络访问地址。

1. 修改 index.wxml

使用 image 标签，src 通过数据绑定取 imgSrc，bind:tap="sing" 绑定点击事件：

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
<view class="box container">
<view class="title">宝塔山</view>
<image src="{{imgSrc}}" mode="widthFix" bind:tap="sing"></image>

<!-- 作业扩展：慢速、快速按钮 -->
<view style="margin-top:40rpx;">
<button bind:tap="setSlow">慢速(0.5倍)</button>
<button bind:tap="setFast">快速(2倍)</button>
</view>
</view>
</scroll-view>

1. 修改 index.js（核心，含作业扩展）

// index.js
let innerAudioContext;
let start = false;

Page({
data: {
imgSrc: "https://xxx-tcb.qcloud.la/images/yanan.webp?xxx"
},

onLoad() {
innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.src = "https://xxx-tcb.qcloud.la/audios/huiyanan.mp3?xxx"

innerAudioContext.onTimeUpdate(()=>{
console.log("当前音频的播放位置：",innerAudioContext.currentTime)
console.log("当前音频播放速率：",innerAudioContext.playbackRate)
})
},

sing() {
start = !start
if (start === true) {
innerAudioContext.play()
console.log("【触发播放】当前音频的播放位置：",innerAudioContext.currentTime)
console.log("【触发播放】当前音频播放速率：",innerAudioContext.playbackRate)
} else {
innerAudioContext.pause()
console.log("【触发暂停】当前音频的播放位置：",innerAudioContext.currentTime)
console.log("【触发暂停】当前音频播放速率：",innerAudioContext.playbackRate)
}
},

setSlow(){
innerAudioContext.playbackRate = 0.5;
console.log("设置慢速，播放速率=",innerAudioContext.playbackRate)
},

setFast(){
innerAudioContext.playbackRate = 2.0;
console.log("设置快速，播放速率=",innerAudioContext.playbackRate)
},

onUnload(){
innerAudioContext.destroy()
}
})

代码要点：

• data 中给出图片路径（云存储路径），实现数据绑定。

• sing() 是点击图片的事件处理函数，负责播放/暂停交替。

• onLoad 是页面生命周期函数，页面加载时触发，一个页面只调用一次，适合初始化音频。

• 扩展功能 1：通过 playbackRate 设置播放速度（数值越大越快）。

• 扩展功能 2：在 play/pause 分支中，用 currentTime 和 playbackRate 打印当前播放位置与速率。

1. 修改 index.wxss

page {

height: 100vh;

display: flex;

flex-direction: column;

}

1. 修改 app.wxss（全局样式）

/**app.wxss**/
.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}

.box {
margin-top: 120rpx;
margin-left: 20rpx;
margin-right: 20rpx;
padding: 20rpx;
border: 2rpx solid pink;
}

.title {
font-size: larger;
font-weight: bolder;
text-align: center;
margin-bottom: 30rpx;
color: red;
}

四、运行效果

• 页面显示宝塔山图片，点击播放音乐，再点暂停，交替切换。

• 打开调试器 Console 面板，每次点击图片自动打印：

当前音频的播放位置： xx.xxxx

当前音频播放速率： 0.5

五、常见坑排查

1. 音频不播放：如果是仅创作者可以读写要确认 url 是云存储的下载 https 地址，不是 FileID；存储权限为所有用户可读，用云存储的下载https的地址和用FileID也可以。

1. 控制台看不到打印：打开调试器 Console 面板，不要勾选过滤。

1. 改速度：修改 innerAudioContext.playbackRate 的数值即可。

六、小结

本案例通过云开发存储解决了小程序 2M 包大小的限制，并综合运用了 image 组件、InnerAudioContext 音频上下文、数据绑定、事件绑定和 onLoad 生命周期。作业扩展则用 playbackRate 和 currentTime 两个属性，加深了对音频播放控制的掌握。