Update 2020-01-20: 由于完成了它的使命，这个口语系统早在几年前就退役了。

我当时的 JavaScript 水平绝对比现在好_(:з」

概述

不要被名字吓到——这只是一个音频分发/播放系统而已。
地址：[redacted]

工具：Chrome, Sublime Text

这个页面完全独立于工作室，就像 /n一样。

口语音频分话题与文章；文章编号01-30，话题编号01-20并有-1与-2。

开工！

首先找模板。在一番百度+ Google 之后发现并没有音频分发的网页模板。——怎么会有呢！

那么从零开始吧！找播放器。

播放器

之前收藏的 dewplayer 基于flash，不适用于 iOS，舍弃。

参观数个题为「xx 个最好的 H5 音频播放器」的网页之后，选定 jQuery+CSS 的Responsive & Touch-Friendly Audio Player。该播放器包含 jquery.js ， audioplayer.min.js 与 audioplayer.css ，大小分别为92KB，7KB，4KB.

在对 demo.html 删删减减后得到了自适应的播放器框。只要用 <audio src=""> 插入音频就行。

然而口语的音频有70个，于是使用 id 参数。对 jQuery 不熟悉自然要百度一番；用 href 直接插入参数，再用 getUrlParam() 获取之。

接下来，寻找在 src 中插入 js 变量的方法。失败几十次后大悟：用 jQuery 可以直接改参数！于是代码变成了这样：

1
2
3

 var audioid = getUrlParam('id'); //Get id
 $("audio").attr("src","audio/"+audioid+".mp3");
 $( function() { $( 'audio' ).audioPlayer(); } );

然后浏览器提示 getUrlParam() 不是函数？！

搜索半天无果后，我发现 jquery.js 里并没有 getUrlParam() 函数。还我 92KB！

于是在网页里插入之。这时 test.html 能正常工作，于是开始构造界面。

按钮

继续寻找 H5 按钮。百度小小地体现了它的优越性：Buttons 是一个中文CSS库。里面提供了各种各样的按钮！太多了以至于花了十分钟删除不需要的CSS类。

使用 Sublime Text 对按钮复制粘贴，做出了选择界面的雏形。

用 <div style="height:20px"></div> 调整纵向间距。水平呢？直接 <body style="text-align:center">。CSS没学好…

在最后时刻添加了版权须知，以防 DMCA Takedown。好像译林不会管这个吧！

上线

/a于 19:06 正式上线。

由于担心自己可怜的18G流量会被瞬间用完，play.html 中使用了 <audio preload="none" controls>。

播放一切正常，可以开始写小记了！——直到按下F12那一刻。

一千多个错误！原来是没有预加载 TimeRanges.end()＝0 使得重复错误。赶紧加上 try(){} 与 catch(){} 却发现并没有什么用。我的流量啊！正准备 preload="auto" 的绝望我发现还可以 preload="meta" 。W3School：“只加载元数据。”

现在，每次刷新都会有2个错误，直到 meta 被加载。简直神奇！

后记

服务器好像不太稳定——WordPress 提醒我：

**连接丢失。**保存已被禁用，直到您重新连接。我们正在您的浏览器中备份此文章，以防不测。

便宜无好货的服务器呀。而且他们把移动的 IP 屏蔽了，说是 Bad IP Connecting。

于是我登上我自己的、国内的服务器也要用代理了。简直神奇！

所以我决定立刻备份我的站点了。

下载速度好慢！NextGen Gallery 的文件太多了。好东西也是要付出代价的呢。

好的；小记就到这里吧。接下来，切换成 code 并将文章备份至剪切板。

——备份结束，重启，发布~