哈基米“点图播放”-北京尧图网络

前两天用微信小程序的云开发做了个玩意儿点一下哈基米它就叫一声再点一下闭嘴再点又叫。中间折腾了一会儿把过程写下来。云开发解决了一个大麻烦微信小程序有个硬性限制主包不能超过 2M。一开始我想着直接把图片、音频丢项目里算了结果还没放几张图包体积就快爆了。这就好比你出门旅游行李箱就那么大非要把棉被枕头锅碗瓢盆全塞进去最后拉链都拉不上。用云开发就不一样了把素材传到云存储小程序里只放个网络地址。相当于你把东西寄存到酒店前台行李箱里只留一张取件码轻装上阵。所以这个案例的核心不是图片也不是音频而是云开发的用法。最终效果页面上趴着一张哈基米点一下 → 哈基米开始叫再点一下 → 闭嘴再点 → 继续叫控制台还会实时播报当前叫到哪了、叫得多快本质上就是个图片版的播放/暂停开关但配上哈基米就莫名喜感。开始动手1. 新建项目打开微信开发者工具项目名称随便我就叫“图片与声音”后端服务不使用云服务没关系云开发是后开的模板不使用模板建完得到一个光秃秃的空项目。2. 上传素材到云存储进云开发控制台 →存储→ 先创建存储桶没有桶你往哪儿装。然后建两个文件夹images→ 把mao.jpg丢进去audios→ 把hajimi.mp3丢进去3. 改权限进存储权限标签页选所有用户可读仅创建者可读写要是免费账号选不了这项那就保持默认的“仅创建者可读写”。不过这种情况拿到的链接是带签名的过一段时间会失效到时候你得重新复制一遍。这就好比你拿的是临时门禁卡过阵子就得去前台续一下。4. 复制文件地址回到存储管理点一下mao.jpg→ 右边弹出详情 → 复制“下载地址”再点hajimi.mp3→ 复制它的“下载地址”这俩地址一会儿要粘到代码里别搞混了。代码部分直接抄app.jsonjson { pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: 图片与声音, navigationBarTextStyle: black }, renderer: webview, style: v2, sitemapLocation: sitemap.json }app.wxsscss /**app.wxss**/ .container { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } pages/index/index.json json { usingComponents: {}, navigationStyle: custom }pages/index/index.wxmlhtml !-- index.wxml -- navigation-bar title图片与声音 back{{false}} colorblack background#FFF/navigation-bar view classcontainer view classtitle哈基米/view !-- 点图片触发 sing 事件 -- image src{{imgSrc}} modewidthFix bind:tapsing / /viewpages/index/index.wxsscss /**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; }pages/index/index.jsjavascript // index.js let innerAudioContext; let start false; // 控制播放/暂停状态 Page({ data: { // 把这里换成你自己云存储里的图片地址 imgSrc: 你的图片下载地址 }, onLoad() { // 创建音频上下文 innerAudioContext wx.createInnerAudioContext(); // 把这里换成你自己云存储里的音频地址 innerAudioContext.src 你的音频下载地址; // 设成 1.5 倍速声音快一点但不会变粗 innerAudioContext.playbackRate 1.5; }, 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); } } })顺手加的两个小功能做完基础版之后我又顺手加了两个小功能播放速度可调在onLoad里写innerAudioContext.playbackRate 1.5。我试过设成 0.5声音直接变粗像哈基米感冒了。1.5 倍速就正常多了只是变快变尖像哈基米被踩了尾巴。控制台打印信息在sing函数里播放和暂停的分支各加两行console.log打印currentTime和playbackRate。控制台就能看到哈基米叫到哪了。结果展示

哈基米“点图播放”

相关推荐

高校运动生物力学实验室建设方案2026版：教学科研双场景设备配置指南

seldon model status 详解：Seldon Core 2 模型状态查询与等待条件实战指南

React + Spring 全栈实战：宠物领养匹配系统与 TTS 语音播报

更多资讯

AI Native Web开发实战：从接口调用到工具调用与状态管理

制造业RAG开源框架：从手册问答到故障诊断的实践

有状态分析实战：持久上下文如何让AI数据分析成为分析伙伴

Flink SQL自定义UDF解析Kafka复杂JSON完整实战

微电网调度中MPC与MVO算法结合的Matlab实现

PLINK按染色体位置提取SNP：区域筛选命令与实操要点

今日更新

小波包能量谱原理与MATLAB实现：从频带分解到故障特征提取

基于LSTM的网易云音乐评论情感分析：数据清洗与模型调优实战

Alpha-Beta剪枝与极大极小值算法：博弈树搜索原理与实战优化

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？