Reference: Drag SVG: https://observablehq.com/d/68afc6dedb39f9e4 https://bl.ocks.org/mbostock/2b534b091d80a8de39219dd076b316cd http://jsfiddle.net/mdml/da37B/

Webaudiox API:https://github.com/jeromeetienne/webaudiox

jquery-3.4.1.min.js以及webaudiox.js为引用JS库

目前已实现的功能： 1、通过点击圆播放每一个声音，拖过按下键盘上的Q键，可暂停播放声音 2、选择图例强调某类声音 3、放大缩小以及左右拖动画面 4、鼠标悬浮在某个声音上，会显示其名字 5、遇到重叠的圆，可以通过鼠标拖拽圆，若需圆恢复原位，再次长按圆即可恢复

待实现功能： 1、当悬浮在某个声音上时，展示其叠层关系，比如当悬浮在Clap01.wav上时，Clap02.wav以及Clap03.wav会通过箭头的方式指向Clap01.wav，表明Clap02.wav以及Clap03.wav是Clap01.wav的叠层。此时高亮强调这三个声音，降低其他声音圆的透明度，通过键盘的1（Clap02.wav）,2（Clap03.wav）,3,4,5,6,7,8等来播放其叠层声音。