（搓搓手）同学们，上次我们学完了HTML5的「七巧板」，今天要进入会唱歌的第八章啦！准备好让网页开口说话了吗？

8.1 音频(audio)

8.1.1 会唱歌的标签

从前我们要在网页放音乐得用Flash插件，就像在网页里塞了个MP3播放器。现在HTML5的<audio>标签，就像给浏览器装了个随身听：

<audio src="music/demo.mp3" controls></audio>

（试试把披头士的《Hey Jude》拖进项目文件夹，瞬间拥有私人演唱会！）

8.1.2 音乐播放器变形记

想让音频自动循环播放？看这些神奇的属性：

<audio controls autoplay loop muted
       preload="auto"
       src="music/ elevator_music.mp3">
</audio>

（温馨提示：autoplay就像不请自来的推销电话，很多浏览器会拒绝它哦~）

8.1.3 格式大战生存指南

各浏览器支持的音频格式就像奶茶店的甜度选择：

用多格式备胎方案：

<audio controls>
  <source src="music/soundtrack.mp3" type="audio/mpeg">
  <source src="music/soundtrack.ogg" type="audio/ogg">
  您的浏览器古老得可以进博物馆了！
</audio>

8.1.4 实战：制作深夜电台

<div class="radio-station">
  <audio controls style="width:300px;margin:20px">
    <source src="jazz.mp3">
    <source src="jazz.ogg">
    <source src="jazz.wav">
    <em>建议用现代浏览器，就像喝奶茶别用竹筒</em>
  </audio>
</div>

8.1.5 踩坑预警

1. 自动播放可能被浏览器拦截，就像商场突然外放的音乐
2. 手机浏览器常限制自动播放，需要用户「点一下」触发
3. 文件路径错误时...（此时无声胜有声）
4. 不同浏览器音量控制像开盲盒

（神秘预告：下节课我们将让网页变身电影院！猜猜是哪个标签要登场？）