今天学习《前端篇》第3章完成交互功能的第10课，控制游戏音效，添加单击音效和背景音乐。
学习目标
- 学习使用
<audio>标签； - 学习使用JS播放声音；
- 添加循环背景音乐；
- 创建背景音乐状态切换按钮；
- 处理自定义图片按钮的互动；
- 学习使用条件运算符。
主要知识点/技能点
-
一般会在HTML5页面上添加一个来播放音频，audio 组件允许有多个 source 元素，每个 source 可以链接不同类型的音频文件，浏览器将使用第一个识别的格式。
-
ogg、mp3、wav是三种常见的音频格式，没有一个浏览器是同时支持三种格式的，如果想让标签表现正常，至少需要定义两个source。
-
HTML5 DOM API有一个 canPlayType 方法，它返回浏览器是否能播放指定类型的音频/视频文件，用这个方法可以实现
<source>标签实现的功能。canPlayType返回三种值："probably"、"maybe"、""（空字符串）。 -
静音按钮需要有两个状态：一个为常态，单击后音乐停止；另一种是静音态，单击后音乐恢复播放。
-
可以在这个游戏资源网站上查找、下载背景音乐素材：opengameart.org/。
-
可以从这个游戏资源网站上查找、下载图标，网址为：www.flaticon.com/。
-
Audio对象并没有playing或isPlaying这样的属性，但我们可以通过另外两个属性组合判断，如果 currentTime 大于 0，并且 paused 为 false，可以认为音频在播放。
-
在 HTML开发中，createElement 方法通过指定元素名称创建一个元素，其调用语法为：
document.createElement(nodeName) -
浏览器标签栏的图标可以由下面代码控制：
<link rel="shortcut icon" href="favicon.ico"> -
事实上当绘制对象只有一个时，也可以直接使用 drawImage 绘制，不需要创建离屏画布。
-
当在画布上判断点击了哪个对象时，我们可以在监听后依据单击点的位置判断单击的是哪一个对象。
-
条件运算符? : ，有时也叫三元运算符或三目运算符，其标准语法为：
let result = expression ? sentence1 : sentence2如果expression为true，执行sentence1，否则执行sentence2。
实践疑难点
有时候HTML5页面中的Canvas缩放，会影响单击位置的判断，这时候要注意重设画布的原始大小。
小结
阶段性运行截图：
