第30话：好声音 - HTML 漫画大冒险

告别静音时代

🦖

想当年，要在网页上放首歌，还得求助 Flash 插件，不仅安装麻烦，还经常崩溃！

🎵

别提那些黑历史了！现在我有 <audio> 标签，自带播放器，走到哪唱到哪！

HTML5 的 <audio> 元素是一个标准的音频播放器。你不需要任何插件，浏览器原生支持 MP3, WAV, OGG 等格式。

制造噪音...啊不，音乐

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素，快去升级吧！
</audio>

💡

注意那个 controls 属性！没有它，你的播放器就是隐形的！除非你想搞恶作剧...

调音台面板 (属性)

controls

显示播放控件（播放/暂停按钮、进度条、音量）。必选！除非你自己写 JS 控制。

autoplay

自动播放。⚠️ 警告：大多数现代浏览器为了不吓到用户，会默认禁止自动播放声音，除非静音。

loop

循环播放。适合洗脑神曲。

muted

静音。配合 autoplay 使用有奇效。