前端JS特效第22集：html5音乐旋律自定义交互特效
html5音乐旋律自定义交互特效，先来看看效果：
部分核心的代码如下(全部代码在文章末尾)：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ChimeTime™</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="container"><div id="toy"><audio id="chime1" src="img/chime1.mp3"></audio><audio id="chime2" src="img/chime2.mp3"></audio><audio id="chime3" src="img/chime3.mp3"></audio><audio id="chime4" src="img/chime4.mp3"></audio><audio id="chime5" src="img/chime5.mp3"></audio><audio id="chime6" src="img/chime6.mp3"></audio><audio id="chime7" src="img/chime7.mp3"></audio><audio id="chime8" src="img/chime8.mp3"></audio><div id="playhead"></div><div id="steps"></div><div id="controls"><button id="play"><span id="pauseTxt"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#333" d="M14,19H18V5H14M6,19H10V5H6V19Z" /></svg></span><span id="playTxt"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#333" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg> </span></button> <input id="tempo" type="range" min="1" max="9" value="5"><button id="clear"><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#333" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg></button></div></div></div><script src='js/TweenMax.min.js'></script>
<script src="js/script.js"></script></body>
</html>全部代码：html5音乐旋律自定义交互特效