初次接触JS处理audio接口：如何点击头像控制背景音乐播放暂停？

本文共计1254个文字，预计阅读时间需要6分钟。

背景+封楼期间难觅空闲，也静不下心来学习，空闲之余萌生了重做引导单页的想法。因为之前都是搭建站点（某大公司游戏官网），小改一下自然很炫酷，但个人水平有限，还有很多JS不会。

背景

封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无从下手，甚至是看不懂|-_-|；二来对方毕竟没有开源，无论道德还是法律都说不过去，所以……先从简单处写起，后续慢慢迭代吧！

大致布局:Flex

参见 阮一峰Flex布局教程

头像部分

手残党，暂时没有用CSS或者JS绘制特效，因为之前做头像留着底图，所以偷个懒。
CSS：鼠标指针指向头像切换gif，移开切换png。
JS：音乐播放切换gif，暂停切换png。

背景音乐部分

audio接口参见 HTML audio基础API完全使用指南
我只循环播放了一首歌，所以隐藏audio主体美观一些，然后控制按钮交给头像。有需要多首歌的，可以看一下开源的APlayer

遇到的问题:JS加载阻塞,获取不到元素id

在实现头像处鼠标事件时，一直获取不到头像的id，但是控制台调试发现代码无误。原来由于JS的机制是单线程，所以先运行JS代码，再构建相关DOM，需要在外部引用JS时加上属性async,等构建完DOM再获取。