日食的声音-拖动地球远近来控制音量大小

页面的head部分，需引入页面的CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，设置一个audio音频标签放音乐，其余div容器分别放太阳、月亮和音量，代码如下：

<audio id="audio" autoplay loop>
  <source src="mp3/nggyu.mp3" type="audio/mpeg"></source>
  拖动可调整音乐的音量
</audio>
<div class="circle" id="sun"></div>
<div class="circle" id="moon"></div>
<div id="perc">10%</div>

页面的底部，需引入一个必要的JS文件，代码如下：

<script type="text/javascript" src="js/index.js"></script>