剑客
关注科技互联网

第一原理 – 微信开发小记

继上次青云部署遇到点小问题,最近又在微信开发中的语音播放上碰到点问题。回头来看也是定位问题上面没有做好。这次我过度相信我认为有经验的人士,走错方向,忽视了最基本的问题检测。

这次遇到问题的功能其实是要在一个微信里面打开的 H5 页面(使用了 audio 标签)里播放音频。在开发这个功能前,我咨询过前端的同学,能在页面播放的音频格式是什么。他说 mp3 在 iPhone 和 Android 都能支持,我给 mp3 的格式就好。

到了集成测试的时候,他却发现 H5 页面里的音频在微信播放不了,但是用浏览器直接打开就可以,这就奇怪了。他还顺口说:“新生大学的论坛里面都没问题的啊”。然后我第一反应就是 参考已有的成功样例(但是事实证明这不是好的选择)
,所以提议到:“不如你拿一个在新生大学论坛里面可以播放的音频文件给我看看吧?” 他给我一看。这个音频文件哪里是 mp3 格式的啊,是 wav 的啊。你这不是坑我吗?前端那位同学说:“这我不太知道啊,你去问问后端。”

然后我和后端的同学对了一下,发现他和我提供音频的方式是一样的,但是在测试环境里面就真的没发现有多少 mp3 格式的音频数据,反而是 wav 的多。活见鬼了。“你这 wav 和 mp3 是怎么生成的啊?怎么代码和我一样,最后格式不同?” 后端同学也有点发蒙了,他折腾了好一会,翻看了旧数据和源码,感觉有点不一致,只能帮我在测试环境测试。

在这空隙,我先给前端同学临时转成 wav 去测试。他拿了我给的 wav 音频后,发现可以在微信开发者工具中打开的页面播放,但是在手机微信里面打开就不行了。我靠,这又是什么鬼? 不同的运行环境是很大的影响因素,尤其是前端。这也是为什么有时程序员会说,我做的时候可以的啊。
有时这真不是推脱,而是环境不同。

在我们都百思不得其解的时候,那位后端同学回来和我们说:“测试后发现论坛那边用的也是 mp3 格式的,但是我们的文件名有 mp3 后缀。你们那个没有,可能浏览器不支持。” 我听了心想:“那你们之前生成和使用的 wav 是什么鬼啊。而且没有 mp3 后缀也应该可以啊,现在的浏览器应该都能识别。” 不过,我暂时没和他们深究这个问题了,因为他们其实也不太清楚了。最重要的是目前基本确认 mp3 是能在手机打开的页面里播放的。

随后,我们开始寻找其它产品的实现方案,包括嵌入音乐的微信公众号文章和别的 H5 产品。我们甚至还怀疑语音数据流下载格式问题等,但是最后还是无功而返。折腾到凌晨 12 点后还没什么头绪,我们就决定回去休息好第二天再仔细看看。

第二天回来,我再次和前端确认:“你们论坛到底是怎么做的?” CTO 也问他,你是每个音频文件用一个 audio 标签还是怎么样?然后他说:“我是用一个 audio 标签,多个音频的播放是动态改 audio 标签的 src 来控制。我看别人也是这么做的。” 最后,我们都建议他用最原始的方法试一下:“固定 audio 标签,并写死一个 mp3 文件的地址。”

然!后!就!行!了!

啊!原来是前端用了一些他不熟悉的方法来实现音频播放的功能,然后一开始我们又相信了他的判断,没有怀疑到他的做法和回归最基本的测试上面来。

最后,我们回顾一下为什么踩坑了吧。

  • 正在做的这个页面和新生大学 H5 页面差异。

    1. 一个是微信浏览器,一个是 iOS/Android Webview。
    2. 两种不同的音频播放实现方式。这次用动态指定链接,原来只是静态链接。

    这两个巨大的差异一开始我都忽视了,相信了当时前端说的那句:“xxx 都没问题的啊”,就认为他考虑过了,然后顺着他的方向去寻找问题和答案。第一步就走错了。

  • 微信开发者工具和真正的手机微信

    这个也是没有估计到的。不同类型的音频文件在两个地方表现不同,也导致我们分析问题的方向产生偏差。(后面的开发还证明,其它不少地方也是两边有不同表现)

采取 参考已有的成功样例(analogy)必须具备一个前提:样例与当前分析案例的差异性必须很小,而且差异的地方不能对结果产生重大的影响。
所以说, 经验的适用性取决于应用场景的相似性
。我们在 依赖经验做出判断之前,最好还是先把最基础的判断做好

这次真的深刻体会到 Elon Musk 说的这句话的用意:

I think it’s important to reason from first principles rather than by analogy,

[With first principles
] you boil things down to the most fundamental truths … and then reason up from there.”

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址