<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5可视化音频音阶播放代码 - 【更多源码：www.96flw.com】</title>
<script src="js/jquery.min.js"></script>
<script src="js/wavesurfer.min.js"></script>
<style>
.box {
width: 350px;
display: flex;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.waveform {
width: 300px;
}
a[role=btnPause] {
display: none;
}
</style>
</head>
<body>
<script>
//音频 1-4 数组排列
var music = ['0.mp3', '1.mp3', '2.mp3', '3.mp3']
//音阶 1-4 数组排列
var allArr = [
[0.6328, 0.6093, 0.3828, 0.4335, 0.3632, 0.414, 0.4804, 0.3085, 0.4492, 0.375, 0.625, 0.4648, 0.4335, 0.3867, 0.4101, 0.3945, 0.1992, 0.1757, 0.1601, 0.1132, 0.0859, 0.5976, 0.6132, 0.4257, 0.4257, 0.3398, 0.414, 0.3671, 0.3437, 0.4296, 0.3671, 0.6289, 0.4687, 0.4726, 0.3828, 0.5, 0.3007, 0.2304, 0.1562, 0.125, 0.4218, 0.3867, 0.6328, 0.6054, 0.5937, 0.2734, 0.2617, 0.2382, 0.5859, 0.3242, 0.2187, 0.1445, 0.6757, 0.3476, 0.621, 0.5351, 0.2812, 0.1523, 0.1445, 0.0937, 0.5625, 0.5976, 0.414, 0.3359, 0.2695, 0.1914, 0.5078, 0.3359, 0.2773, 0.2031, 0.1679, 0.1523, 0.6015, 0.6484, 0.621, 0.4296, 0.332, 0.2773, 0.7539, 0.4218, 0.3203, 0.1992, 0.1601, 0.1289, 0.5976, 0.3554, 0.2812, 0.1875, 0.1679, 0.1132, 0.1015, 0.0781, 0.625, 0.582, 0.4882, 0.414, 0.4296, 0.3828, 0.4453, 0.3867, 0.4023, 0.3945, 0.6367, 0.496, 0.4687, 0.4335, 0.2851, 0.3867, 0.1875, 0.1718, 0.1406, 0.121, 0.0781, 0.6328, 0.6171, 0.4453, 0.4453, 0.4726, 0.3242, 0.4257, 0.3398, 0.4609, 0.3593, 0.6289, 0.4765, 0.5, 0.4023, 0.4804, 0.332, 0.207, 0.1484, 0.1171, 0.0859, 0.4296, 0.6367, 0.5312, 0.5781, 0.3046, 0.2617, 0.2148, 0.6015, 0.3671, 0.2343, 0.1289, 0.1328, 0.6523, 0.5781, 0.4882, 0.2265, 0.1601, 0.1757, 0.082, 0.5742, 0.6289, 0.4804, 0.3359, 0.2968, 0.2109, 0.4882, 0.3398, 0.2656, 0.1796, 0.1718, 0.1601, 0.5976, 0.6406, 0.6328, 0.4921, 0.3359, 0.2617, 0.6953, 0.4218, 0.3359, 0.2265, 0.1953, 0.1601, 0.5937, 0.3828, 0.3632, 0.2109, 0.1679, 0.1289, 0.0937, 0.539, 0.4179, 0.332, 0.2421, 0.125, 0.082, 0.0625, 0.0468, 0.0507, 0.0312, 0.0273, 0.0156, 0.0156, 0.0039, 0.0039, 0, 0, 0, 0, 0, 0, 0, 0],
[0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.582, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.582, 0.5859, 0.582, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.582, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.4218, 0.2226, 0.1601, 0.0664, 0.0312, 0.0273, 0.0039, 0, 0],
[0, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.5859, 0.582, 0.5859, 0.5859, 0.5859, 0.3906, 0.1992, 0.0742, 0.0273, 0.0078, 0.0039, 0, 0, 0, 0, 0, 0],
[0.0029, -0.009, 0.0109, -0.0124, 0.0271, -0.0174, 0.0342, -0.0355, 0.0293, -0.0326, 0.0564, -0.0467, 0.0421, -0.0635, 0.0789, -0.0663, 0.0775, -0.0909, 0.1117, -0.0803, 0.0582, -0.0846, 0.039, -0.0676, 0.0482, -0.0315, 0.1799, -0.0757, 0.0789, -0.1238, 0.1074, -0.1735, 0.1017, -0.1392, 0.0975, -0.0469, 0.087, -0.0645, 0.0621, -0.0893, 0.088, -0.1017, 0.0937, -0.1131, 0.0616, -0.0996, 0.0904, -0.1165, 0.1684, -0.0872, 0.0845, -0.126, 0.0965, -0.1169, 0.1336, -0.1656, 0.1352, -0.1138, 0.2219, -0.1431, 0.1879, -0.3011, 0.2957, -0.2796, 0.3328, -0.1302, 0.4159, -0.181, 0.2124, -0.3388, 0.5107, -0.2452, 0.219, -0.1724, 0.1933, -0.273, 0.3053, -0.2885, 0.1268, -0.1455, 0.2363, -0.1393, 0.2467, -0.3278, 0.0987, -0.2176, 0.2394, -0.2109, 0.1302, -0.152, 0.424, -0.2163, 0.7262, -0.3107, 0.5183, -0.5133, 0.7874, -0.5604, 0.718, -0.4673, 0.4506, -0.6939, 0.382, -0.6471, 0.3975, -0.3079, 0.2924, -0.4183, 0.5746, -0.3059, 0.4008, -0.3887, 0.301, -0.2693, 0.1295, -0.2297, 0.2516, -0.0963, 0.2143, -0.1366, 0.2275, -0.2751, 0.1778, -0.1564, 0.2973, -0.177, 0.087, -0.2074, 0.1656, -0.2181, 0.2455, -0.2458, 0.1835, -0.2557, 0.1798, -0.1981, 0.0982, -0.2557, 0.1823, -0.1893, 0.1147, -0.2295, 0.2753, -0.244, 0.2066, -0.192, 0.1013, -0.1507, 0.3346, -0.1497, 0.3059, -0.2964, 0.248, -0.2129, 0.2824, -0.2013, 0.389, -0.152, 0.2147, -0.1763, 0.2003, -0.1641, 0.1535, -0.163, 0.1333, -0.1243, 0.1818, -0.2032, 0.0981, -0.1247, 0.1455, -0.1014, 0.1006, -0.1012, 0.1581, -0.2302, 0.236, -0.1798, 0.2088, -0.2754, 0.2008, -0.159, 0.3114, -0.2776, 0.366, -0.1926, 0.2907, -0.5673, 0.2881, -0.5298, 0.4454, -0.4327, 0.3555, -0.2996, 0.3452, -0.5221, 0.6682, -0.19, 0.3935, -0.3499, 0.2268, -0.3618, 0.265, -0.2625, 0.2906, -0.1965, 0.2518, -0.1378, 0.2448, -0.1946, 0.3083, -0.2132, 0.1618, -0.2638, 0.2111, -0.1759, 0.4136, -0.1832, 0.2999, -0.1327, 0.4578, -0.7573, 0.3601, -0.3876, 0.4181, -0.3894, 0.306, -0.2394, 0.2884, -0.2912, 0.4353, -0.4308, 0.3689, -0.4645, 0.319, -0.2892, 0.3718, -0.2829, 0.3372, -0.1815, 0.2176, -0.385, 0.279, -0.3661, 0.3394, -0.2963, 0.4204, -0.3149, 0.1841, -0.3466, 0.2714, -0.3862, 0.1975, -0.2794, 0.4083, -0.4419, 0.193, -0.5247, 0.2598, -0.34, 0.3107, -0.1792, 0.248, -0.2644, 0.2399, -0.2225, 0.2361, -0.3171, 0.4134, -0.2823, 0.2828, -0.3274, 0.3081, -0.2416, 0.2618, -0.2335, 0.3983, -0.2119, 0.4145, -0.2346, 0.348, -0.2906, 0.2595, -0.2122, 0.3771, -0.2657, 0.2718, -0.2054, 0.218, -0.2043, 0.1973, -0.1766, 0.1393, -0.1381, 0.1284, -0.104, 0.
