mgtv - 素材

当前位置:Gxlcms > 播放器 > html5可视化音频音阶播放代码

html5可视化音频音阶播放代码

时间:2021-07-01 10:21:17 帮助过:0人阅读

html5可视化音频音阶播放代码 html5可视化音频音阶播放代码是一款html5基于canvas属性制作mp3音乐播放,可视化音频音阶播放过程。
<head>
<meta charset="UTF-8">
<title>html5可视化音频音阶播放代码 - mgtv素材</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.1507, -0.2489, 0.2203, -0.222, 0.2049, -0.2201, 0.1717, -0.1863, 0.1139, -0.1296, 0.1791, -0.1219, 0.1643, -0.1867, 0.1743, -0.2037, 0.1666, -0.1181, 0.1985, -0.133, 0.1273, -0.0942, 0.1313, -0.2476, 0.238, -0.3021, 0.1284, -0.1991, 0.1721, -0.148, 0.1408, -0.163, 0.0958, -0.1283, 0.0832, -0.1122, 0.1556, -0.141, 0.1352, -0.1523, 0.1778, -0.1254, 0.2008, -0.139, 0.3117, -0.2763, 0.1719, -0.2292, 0.2744, -0.1457, 0.1579, -0.2048, 0.4518, -0.5489, 0.4008, -0.349, 0.3071, -0.3274, 0.549, -0.4428, 0.3816, -0.3922, 0.1084, -0.2966, 0.3164, -0.2978, 0.1768, -0.1568, 0.2744, -0.2005, 0.4112, -0.3497, 0.3497, -0.3462, 0.169, -0.341, 0.3338, -0.2814, 0.2487, -0.2416, 0.3016, -0.2828, 0.3772, -0.3133, 0.309, -0.1615, 0.2594, -0.2854, 0.1567, -0.1837, 0.2205, -0.1307, 0.1933, -0.1403, 0.1673, -0.1338, 0.1256, -0.1275, 0.2669, -0.5297, 0.2624, -0.0769, 0.5225, -0.2825, 0.1542, -0.1306, 0.1454, -0.3139, 0.1825, -0.1541, 0.1031, -0.2169, 0.419, -0.3127, 0.2257, -0.2663, 0.314, -0.2895, 0.1418, -0.2206, 0.3753, -0.2692, 0.2792, -0.2519, 0.234, -0.2512, 0.382, -0.3525, 0.2572, -0.3455, 0.3808, -0.2463, 0.2454, -0.2137, 0.3569, -0.1887, 0.1686, -0.1108, 0.2827, -0.1953, 0.1875, -0.1756, 0.1655, -0.1485, 0.1345, -0.13, 0.321, -0.1373, 0.5392, -0.2688, 0.3639, -0.4529, 0.3159, -0.3528, 0.356, -0.2904, 0.2012, -0.2255, 0.2419, -0.1823, 0.2398, -0.1755, 0.4367, -0.2269, 0.2993, -0.3068, 0.2393, -0.2617, 0.5967, -0.3793, 0.3746, -0.5037, 0.317, -0.3628, 0.33, -0.1818, 0.2081, -0.16, 0.3148, -0.2726, 0.365, -0.2614, 0.2746, -0.2547, 0.2255, -0.2757, 0.3107, -0.4069, 0.0971, -0.3015, 0.2384, -0.3753, 0.2943, -0.3021, 0.4198, -0.2142, 0.2595, -0.3668, 0.399, -0.182, 0.3737, -0.1647, 0.1761, -0.5143, 0.3735, -0.6014, 0.4123, -0.3268, 0.3315, -0.1956, 0.208, -0.3135, 0.2634, -0.2892, 0.2402, -0.4662, 0.4482, -0.1619, 0.4664, -0.2128, 0.1971, -0.2146, 0.0138, -0.4312, 0.2738, -0.2654, 0.2913, -0.238, 0.3974, -0.3784, 0.3651, -0.2259, 0.352, -0.3396, 0.4674, -0.462, 0.3159, -0.3456, 0.1312, -0.1265, 0.4096, -0.241, 0.2497, -0.282, 0.286, -0.1974, 0.1678, -0.2175, 0.156, -0.1037, 0.1481, -0.0496, 0.1612, -0.0786, 0.0505, -0.1502, 0.0332, -0.1179, 0.0416, -0.1392, 0.1187, -0.0729, 0.0985, -0.0394, 0.0933, -0.0791, 0.0759, -0.0858, 0.0647, -0.1004, 0.0778, -0.0861, 0.1242, -0.1089, 0.1309, -0.1672, 0.092, -0.153, 0.2259, -0.2507, 0.3631, -0.1926, 0.416, -0.2861, 0.2631, -0.2609, 0.4037, -0.4104, 0.2869, -0.2858, 0.255, -0.2447, 0.2741, -0.4195, 0.3661, -0.3428, 0.3971, -0.2124, 0.2571, -0.1913, 0.1158, -0.2896, 0.2957, -0.1716, 0.1981, -0.2619, 0.2199, -0.3064, 0.551, -0.5399, 0.546, -0.76, 0.3964, -0.4326, 0.3848, -0.3405, 0.2302, -0.3219, 0.2553, -0.3044, 0.2686, -0.2983, 0.1382, -0.2244, 0.2284, -0.2072, 0.3572, -0.0344, 0.2023, -0.1926, 0.1943, -0.2071, 0.1344, -0.1611, 0.301, -0.1423, 0.1842, -0.196, 0.2111, -0.1484, 0.2151, -0.1683, 0.1865, -0.157, 0.1892, -0.1456, 0.2081, -0.1204, 0.2328, -0.1903, 0.2318, -0.1355, 0.2301, -0.1265, 0.3148, -0.1605, 0.3127, -0.3797, 0.1909, -0.2836, 0.3108, -0.3206, 0.4418, -0.3038, 0.217, -0.3311, 0.2535, -0.2774, 0.3523, -0.2026, 0.3846, -0.3942, 0.1749, -0.2993, 0.2612, -0.2251, 0.1383, -0.1959, 0.1344, -0.1374, 0.2085, -0.104, 0]
    ]
    //动态创建标签
    var html = ''
    for (var i = 0; i < music.length; i++) {
        html = '<div class="box">' +
            '<div class="group"><a href="javascript:" id="btnPlay' + i + '" role="btnPlay" tabindex="' + i + '">播放</a>' +
            '<a href="javascript:"  id="btnPause' + i + '" role="btnPause" tabindex="' + i + '">暂停</a></div>' +
            '<div id="waveform' + i + '" class="waveform"></div>' +
            '</div>'
        $("body").append(html);
    }

    $(".waveform").each(function (i, item) {
        var wavesurfer = $(this).attr("id");
        wavesurfer = WaveSurfer.create({
            container: '#' + wavesurfer,
            barWidth: 2,
            height: 65,
            waveColor: '#428bca',
            progressColor: 'green',
            cursorColor: 'red',
            cursorWidth: 3
        });
//      wavesurfer.load() 一个参数的时候,进入页面音乐都加载,
//      2个参数 先加载轨道 点击哪个音乐加载哪个
//      详情可F12 更改参数 看network里的变化
        wavesurfer.load(music[i], allArr[i]);
//   可获取音轨数据(上述音轨数组在此处获取,正式项目应该后台获取音轨数据)
//        setTimeout(function () {
//            console.log(wavesurfer.exportPCM())
//        }, 1000)
//点击播放
        $("#btnPlay" + i).click(function () {
            $("a[role=btnPause]").click();
            wavesurfer.play();
            $("#btnPlay" + i).hide()
            $("#btnPause" + i).show()
        });
//        点击暂停
        $("#btnPause" + i).click(function () {
            wavesurfer.pause();
            $("#btnPlay" + i).show()
            $("#btnPause" + i).hide()
        });
    });
</script>

</body>