第30话

好声音

HTML5 Audio 音频
告别静音时代
🦖
想当年,要在网页上放首歌,还得求助 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 使用有奇效。