let objSocket; let initPlay = false; let wavesurfer = WaveSurfer.create({ container: '#pcmGraph',//容器 waveColor: '#FF55C5', progressColor: '#00BFBF', split: false, minPxPerSec: 8, height: 128, // barWidth: 1, barHeight: 1.5, splitChannels: false, audioRate: '1', plugins: [ WaveSurfer.spectrogram.create({ container: '#stftGraph', labels: true, colorMap: colors, fftSamples: 1024, height: 256, }), ] }); var player = new PCMPlayer({ // inputCodec: 'Int16', inputCodec: 'Float32', channels: 1, sampleRate: 16000, flushTime: 3000 }); // 频域频谱图 const chart = new G2.Chart({ container: "fftGraph", autoFit: true, padding: [30, 10, 30, 40], defaultInteractions: [] }); wavesurfer.on("finish", () => { document.getElementById("playAudio").innerText="播放"; // wavesurfer.pause(); objSocket.onclose(); initSocket("ws://lfxstek.top:28091"); }); window.onload = function () { initSocket("ws://lfxstek.top:28091"); const btn = document.getElementById("btn"); btn.onclick = sendMessage; const playBtn = document.getElementById("playAudio"); playBtn.onclick = playAudio; } function initSocket(wsUrl) { // const ws = "ws://" + window.location.hostname + ":8081"; // const ws = "ws://lfxstek.top:8081"; objSocket = new WebSocket(wsUrl); objSocket.onopen = function () { console.log("Connected to WebSocket server"); sendMessage(); } objSocket.onclose = function () { console.log("Disconnected"); } objSocket.onmessage = function (evt) { console.log("onMessage", evt); drawPCMGraph(evt.data); document.getElementById("playAudio").innerText="播放"; playAudio(); } objSocket.onerror = function (evt) { console.log("Error ocured: " + evt.data); } } function sendMessage() { if (!objSocket || objSocket.readyState !== 1) { return; } // while (!objSocket || objSocket.readyState !== 1) { // continue; // } objSocket.send("1"); console.log("send message"); } function drawPCMGraph(data) { console.log("draw pcm graph"); const reader = new FileReader(); reader.readAsArrayBuffer(data); reader.onload = () => { player.feed(reader.result); var buf = new Uint32Array(reader.result); const audioDate = new Blob([addWavHeader(buf, 16000, 32, 1)]); const srcUrl = window.URL.createObjectURL(audioDate); wavesurfer.load(srcUrl); // drawFFTGraph(buf); wavesurfer.play(); }; } function playAudio() { const playBtn = document.getElementById("playAudio"); if (playBtn.innerText === "播放") { if (!initPlay) { initPlay =true; }else{ playBtn.innerText = "暂停"; } wavesurfer.play(); } else { playBtn.innerText = "播放"; wavesurfer.pause(); } } function drawFFTGraph(data) { // return let newFFT = []; // 找最大值 let max = 0; for (let i = 0; i < 512; i++) {//data.length if (i < 10) { data[i] = 0 } if (data[i] > max) { max = data[i]; } } // 归一 for (let i = 0; i < 512; i++) {//data.length newFFT.push({ index: i, freq: data[i] / max, }) } chart.data(newFFT); chart.scale({ index: { tickCount: 48, nice: true, }, freq: { tickCount: 7, nice: true, } }); chart.axis('index', { title: { text: '(kHz)', position: 'center', offset: 25, style: { fill: '#9BB7EF', fontSize: '13' } } }) chart.interval().position("index*freq"); chart.legend(false); chart.tooltip(false); chart.render(); }