企业官网建设流程全解析

微信小程序实战：图片与声音（image组件 + InnerAudioContext 音频播放）

本文对应教材《案例 2.2 图片与声音》，完整记录如何在小程序中使用 image 组件展示图片、使用 InnerAudioContext 控制音频的播放与暂停，并扩展播放速度控制与播放信息打印功能。

一、案例效果

小程序界面上显示一幅图片（延安宝塔山），点击图片时播放音乐，再次点击暂停，再次点击又播放，如此交替；下方提供"慢速 / 正常 / 快速"按钮控制播放速度，每次播放或暂停时在控制台打印当前播放位置与播放速率。

二、为什么用云存储

微信小程序对包体积有限制：单个主包不能超过2M。图片、音频这类资源体积较大（本例中 huiyanan.mp3 约 4.5M），如果直接打包进小程序，会超出体积限制。因此把图片和音频上传到云存储，在代码里通过网络地址引用，从而减小小程序包体积。

三、新建项目与基础配置

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

1. 修改 app.json

将渲染引擎改为webview（Skyline 对本例不适用）：

{"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:tap="sing"绑定点击事件；下方放三个速度按钮：

<!--index.wxml--><navigation-bartitle="图片与声音"back="{{false}}"color="black"background="#FFF"></navigation-bar><viewclass="box container"><viewclass="title">宝塔山</view><imagesrc="{{imgSrc}}"mode="widthFix"bind:tap="sing"/><viewclass="speed-row"><buttonsize="mini"bindtap="setSlow">慢速</button><buttonsize="mini"bindtap="setNormal">正常</button><buttonsize="mini"bindtap="setFast">快速</button></view></view>

要点：

• src="{{imgSrc}}"：数据绑定，把data.imgSrc的值赋给图片地址；
• mode="widthFix"：图片宽度撑满，高度按原图比例自动计算；
• bind:tap="sing"：点击图片时调用页面里的sing()方法。

五、逻辑 index.js

模块级变量保存音频上下文和播放状态；onLoad是页面生命周期函数，页面加载时只调用一次，在这里创建音频实例并设置地址；sing()通过取反start实现播放/暂停交替。

// index.jsletinnerAudioContext;letstart=false;Page({data:{imgSrc:'https://你的云存储地址/images/yanan.webp'},onLoad(){innerAudioContext=wx.createInnerAudioContext()innerAudioContext.src='https://你的云存储地址/audios/huiyanan.mp3'},sing(){start=!startif(start==true){innerAudioContext.play()}else{innerAudioContext.pause()}// 功能扩展：打印当前播放位置与播放速率console.log('播放位置 currentTime =',innerAudioContext.currentTime,'秒')console.log('播放速率 playbackRate =',innerAudioContext.playbackRate,'倍')},setSlow(){innerAudioContext.playbackRate=0.5this.setData({rate:0.5})console.log('已设置为慢速，播放速率 =',innerAudioContext.playbackRate)},setNormal(){innerAudioContext.playbackRate=1this.setData({rate:1})console.log('已设置为正常速度，播放速率 =',innerAudioContext.playbackRate)},setFast(){innerAudioContext.playbackRate=1.5this.setData({rate:1.5})console.log('已设置为快速，播放速率 =',innerAudioContext.playbackRate)}})

核心 API：

• wx.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 倍

八、小结

本例串联了小程序的几个基础知识点：

1. image 组件与mode属性、数据绑定{{imgSrc}}；
2. 事件绑定bind:tap与页面方法；
3. InnerAudioContext创建、播放、暂停音频；
4. onLoad 生命周期，页面加载时初始化音频；
5. 云存储存放大体积资源以绕过 2M 包体积限制；
6. 扩展：通过playbackRate控制语速、通过currentTime/playbackRate在控制台打印播放状态。

— END —