神奇的 HTML5 与 Base64

起因

这两天看到一个搞笑的 js 库 fartscrool。可以让你页面每下拉一点就听到一声屁响。

但是令我好奇的是整个库只有 js 文件，于是好奇是怎么用 js 播放声音的。

其精简后的代码：

var mp3 = {
    prefix: "data:audio/mp3;base64,",
    sound: "SUQzAwAAAAALClRJVDIAAABkAAAAAAAAAG.....省略n多"
    };
    
    var player = document.createElement("audio");
  player.src = mp3.prefix + mp3.sound;
    document.getElementsByTagName('body')[0].appendChild(container);
  player.play();

看到其实是创建了 audio 标签。那么 mp3.sound 那一堆是神马东西呢？原来是 base64。

其实还有一些标签也能这样玩：

img 标签 + BASE64：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

audio 标签：

<audio controls src="data:audio/ogg;base64" + BASE64_STRING />

video 标签：

<video controls> 
  <source type="video/webm" src="data:video/webm;base64," + BASE64_STRING> 
  <source type="video/mp4" src="data:video/mp4;base64," + BASE64_STRING> 
</video>

上面例子中的红点：

当然，如果你的浏览器支持，那么进这个网页的时候应该能听到一声悠长的 “噗” :P

---

手头有声音文件，怎么转换为 Base64 编码？

• 用 PHP 获得 Base64 编码后的字符串:

function getEncodedVideoString($type, $file) { 
   return 'data:video/' . $type . ';base64,' . base64_encode(file_get_contents($file)); 
}

• 在线转换工具及其源码:

http://codecontribution.blogspot.com/2013/06/a-while-ago-friend-of-mine-told-me-i-am.html

其他方式就不用介绍了，以上两个只是抛砖引玉。