|
|
@@ -2,7 +2,7 @@
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
+ <!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
|
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
|
|
|
|
<title>节点实时播放</title>
|
|
|
@@ -16,7 +16,7 @@
|
|
|
<input id="ws_url" type="text" value="ws://10.138.6.221:28001">
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <input id="ws_msg" type="text" value="57">
|
|
|
+ <input id="ws_msg" type="text" value="53" onchange="changeNum(value)">
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
|
|
|
@@ -25,17 +25,19 @@
|
|
|
<button onclick="connectWS()" id="conn_btn">连接</button>
|
|
|
<button onclick="startPlay()" id="play_btn">播放</button>
|
|
|
<button onclick="stopPlay()" id="stop_btn">停止</button>
|
|
|
- <button onclick="startPlay2()" id="play_btn">播放2</button>
|
|
|
- <button onclick="startPlay()">播放3</button>
|
|
|
+ <!-- <button onclick="startPlay2()" id="play_btn">播放2</button> -->
|
|
|
<!-- <button id="btn">获取数据</button>
|
|
|
<button id="playAudio">播放</button> -->
|
|
|
<div class="pcmGraph_wrapper">
|
|
|
<span class="wrapper_span">时域波纹图</span>
|
|
|
- <div id="pcmGraph" style="background: #0e2855;"></div>
|
|
|
+ <div id="pcmGraph"></div>
|
|
|
</div>
|
|
|
<div class="wrapper">
|
|
|
+ <!-- <span class="wrapper_span">时频域声纹图</span> -->
|
|
|
+ <!-- <div id="stftGraph"></div> -->
|
|
|
<span class="wrapper_span">时频域声纹图</span>
|
|
|
- <div id="stftGraph"></div>
|
|
|
+ <div id="wrapper_map_pcmGraph"></div>
|
|
|
+ <div id="wrapper_map_stftGraph"></div>
|
|
|
<span class="wrapper_span">频域频谱图</span>
|
|
|
<div id="fftGraph"></div>
|
|
|
|
|
|
@@ -46,8 +48,7 @@
|
|
|
</div>
|
|
|
|
|
|
<script src="./js/pcm_player.js"></script>
|
|
|
- <!--script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.0/dist/g2.min.js"></script-->
|
|
|
- <script src="./js/g2.min.js"></script>
|
|
|
+ <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.2.0/dist/g2.min.js"></script>
|
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
|
|
|
<script src="./pcm_to_wav.js"></script> -->
|
|
|
<script src="./js/wavesurfer.js"></script>
|
|
|
@@ -60,7 +61,7 @@
|
|
|
<script>
|
|
|
|
|
|
//xieqian js
|
|
|
- let samples = 16000;
|
|
|
+ let samples = 125000;
|
|
|
// 频域频谱图
|
|
|
const chart = new G2.Chart({
|
|
|
container: "fftGraph",
|
|
|
@@ -75,35 +76,45 @@
|
|
|
inputCodec: 'Float32',
|
|
|
channels: 1,
|
|
|
sampleRate: samples,
|
|
|
- flushTime: 1000
|
|
|
+ flushTime: 3000
|
|
|
});
|
|
|
+ const offlineCtx = new OfflineAudioContext(1, 125000 * 40, 125000);
|
|
|
let wavesurfer = WaveSurfer.create({
|
|
|
container: '#pcmGraph',//容器
|
|
|
waveColor: '#FF55C5',
|
|
|
progressColor: '#00BFBF',
|
|
|
split: false,
|
|
|
- minPxPerSec: 18,
|
|
|
- audioContext: player.audioCtx,
|
|
|
+ minPxPerSec: 8,
|
|
|
drawingContextAttributes: {
|
|
|
desynchronized: false
|
|
|
},
|
|
|
height: 128,
|
|
|
- // barWidth: 0.8,
|
|
|
- barHeight: 13,
|
|
|
+ barHeight: 0.7,
|
|
|
splitChannels: false,
|
|
|
audioRate: '1',
|
|
|
+ });
|
|
|
+ let wavesurfer_map = WaveSurfer.create({
|
|
|
+ container: '#wrapper_map_pcmGraph',
|
|
|
+ waveColor: "#FF55C5",
|
|
|
+ audioContext: offlineCtx,
|
|
|
+ progressColor: "#00BFBF",
|
|
|
+ height: 0,
|
|
|
plugins: [
|
|
|
WaveSurfer.spectrogram.create({
|
|
|
- container: '#stftGraph',
|
|
|
- labels: true,
|
|
|
+ container: '#wrapper_map_stftGraph',
|
|
|
colorMap: colors,
|
|
|
- fftSamples: 1024,
|
|
|
- // height: 400,
|
|
|
- frequencyMax:samples/2,
|
|
|
+ height: 512,
|
|
|
+ frequencyMax: 125000 / 2,
|
|
|
+ labels: true,
|
|
|
}),
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ wavesurfer.on("finish", () => {
|
|
|
+ objSocket.send(play_cmd);
|
|
|
+ });
|
|
|
+ wavesurfer.on("ready", () => {
|
|
|
+ wavesurfer.play()
|
|
|
});
|
|
|
-
|
|
|
|
|
|
function drawFFTGraph(data) {
|
|
|
// return
|
|
|
@@ -158,7 +169,7 @@
|
|
|
}
|
|
|
// jiangkai js
|
|
|
// play command value
|
|
|
- var play_cmd = document.getElementById("ws_msg").value;
|
|
|
+ let play_cmd = document.getElementById("ws_msg").value;
|
|
|
var stop_cmd = "stop";
|
|
|
// var isPlay = false
|
|
|
var connBtn = document.getElementById("conn_btn");
|
|
|
@@ -209,9 +220,8 @@
|
|
|
stopBtn.setAttribute('disabled', 'disabled');
|
|
|
connBtn.removeAttribute('disabled');
|
|
|
}
|
|
|
-
|
|
|
function onMessage(evt) {
|
|
|
- console.log(wavesurfer,"@xq");
|
|
|
+ // console.log(wavesurfer, "@xq");
|
|
|
//websocket返回数据信息处理
|
|
|
// console.log('Retrieved data from server: ' + evt.data.size)
|
|
|
if (evt.data.size > 10) {
|
|
|
@@ -224,22 +234,30 @@
|
|
|
// player.feed(this.result);
|
|
|
let input = new Float32Array(this.result);
|
|
|
// 数据全部左移，使得小数点前有足够的整数部分, 然后取整
|
|
|
- let buf = new Int32Array(input.length);
|
|
|
+ // let buf = new Int32Array(input.length);
|
|
|
+ let y = 0;
|
|
|
+ let buf = new Int32Array(125000);
|
|
|
+ const aisle = 1;
|
|
|
+ const maxAisle = 2;
|
|
|
+ let multiple = 60000000000;
|
|
|
for (var i = 0; i < input.length; i++) {
|
|
|
- // buf[i] = input[i] * 10000000000;//100000000000
|
|
|
- buf[i] = input[i] * 5000000000;
|
|
|
- buf[i] = parseInt(buf[i]);
|
|
|
+ if (i % maxAisle === aisle) {
|
|
|
+ buf[y] = input[i] * multiple;
|
|
|
+ buf[y] = parseInt(buf[y]);
|
|
|
+ y++;
|
|
|
+ }
|
|
|
}
|
|
|
let uintBuf = new Uint32Array(buf);
|
|
|
- const audioDate = new Blob([addWavHeader(uintBuf, samples, 32, 2)]);
|
|
|
+ const audioDate = new Blob([addWavHeader(uintBuf, samples, 32, 1)]);
|
|
|
+ wavesurfer_map.loadBlob(audioDate);
|
|
|
wavesurfer.loadBlob(audioDate);
|
|
|
drawFFTGraph(uintBuf);
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- setTimeout('objSocket.send(play_cmd)', 10000);
|
|
|
+ // setTimeout('objSocket.send(play_cmd)', 1000);
|
|
|
}
|
|
|
else {
|
|
|
- setTimeout('objSocket.send(play_cmd)', 10000);
|
|
|
+ setTimeout('objSocket.send(play_cmd)', 1000);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
@@ -247,44 +265,35 @@
|
|
|
|
|
|
//发送消息
|
|
|
function startPlay() {
|
|
|
- play_cmd = document.getElementById("ws_msg").value;
|
|
|
- var ar=[53,54,55,57];
|
|
|
- let i=Math.floor(Math.random()*4);
|
|
|
- play_cmd=ar[i]
|
|
|
objSocket.send(play_cmd);
|
|
|
playBtn.setAttribute('disabled', 'disabled');
|
|
|
+ wavesurfer.play();
|
|
|
}
|
|
|
-// //李兆基2 10.30.1.88
|
|
|
-// const baseUrl="http://10.30.1.88"
|
|
|
-// const baseUrls="ws://10.30.1.88"
|
|
|
-// const baseApi = baseUrl+":11086";
|
|
|
-// const baseResources = baseUrl+":9000";
|
|
|
-// const baseWs = baseUrls+":11086/ws";
|
|
|
-// const baseVideo = "10.30.1.88:10087"
|
|
|
-// const baseVioce = baseUrl+":11086/video"
|
|
|
-// const blueThemeMap = baseUrl+":9000/map/blue/foshan/"; // 蓝色地图
|
|
|
-// const greenThemeMap = baseUrl+":9000/map/green/foshan/"// //绿色地图
|
|
|
-// const mapCenter = [113.2576, 22.8383]; //[113.111836,23.066335]
|
|
|
|
|
|
-[57,53,54,55]
|
|
|
//发送消息
|
|
|
function startPlay2() {
|
|
|
- wavesurfer.setPlaybackRate(8)
|
|
|
- wavesurfer.setVolume(100)
|
|
|
- wavesurfer.play();
|
|
|
}
|
|
|
|
|
|
//关闭连接
|
|
|
function stopPlay() {
|
|
|
// isPlay = false;
|
|
|
player.destroy();
|
|
|
+ player = new PCMPlayer({
|
|
|
+ // inputCodec: 'Int16',
|
|
|
+ inputCodec: 'Float32',
|
|
|
+ channels: 1,
|
|
|
+ sampleRate: samples,
|
|
|
+ flushTime: 3000
|
|
|
+ });
|
|
|
if (objSocket.readyState === WebSocket.OPEN) {
|
|
|
objSocket.send("close");
|
|
|
objSocket.close(1000, "Disconnect");
|
|
|
}
|
|
|
playBtn.removeAttribute('disabled');
|
|
|
}
|
|
|
-
|
|
|
+ function changeNum(data){
|
|
|
+ play_cmd = data
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
</body>
|
