123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <meta http-equiv="pragma" content="no-cache">
- <title>节点实时播放</title>
- <link rel="stylesheet" type="text/css" href="./css/index.css" />
- </head>
- <body>
- <table>
- <tbody>
- <tr>
- <input id="ws_url" type="text" value="ws://10.138.6.221:28001">
- </tr>
- <tr>
- <input id="ws_msg" type="text" value="57">
- </tr>
- </tbody>
- </table>
- <div class="container">
- <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 id="btn">获取数据</button>
- <button id="playAudio">播放</button> -->
- <div class="pcmGraph_wrapper">
- <span class="wrapper_span">时域波纹图</span>
- <div id="pcmGraph" style="background: #0e2855;"></div>
- </div>
- <div class="wrapper">
- <span class="wrapper_span">时频域声纹图</span>
- <div id="stftGraph"></div>
- <span class="wrapper_span">频域频谱图</span>
- <div id="fftGraph"></div>
- </div>
- <div class="wrapper">
- </div>
- </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://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>
- <script src="./js/wavesurfer.spectrogram.min.js"></script>
- <script type="text/javascript" src="./js/addWavHeader.js"></script>
- <script type="text/javascript" src="./js/colors.js"></script>
- <script type="text/javascript" src="./js/init.js"></script>
- <script type="text/javascript" src="./js/processing.js"></script>
- <script type="text/javascript" src="./js/dsp.js"></script>
- <script>
- //xieqian js
- let samples = 16000;
- // 频域频谱图
- const chart = new G2.Chart({
- container: "fftGraph",
- autoFit: true,
- padding: [30, 10, 30, 40],
- defaultInteractions: []
- });
- //New pcm player
- var player = new PCMPlayer({
- // inputCodec: 'Int16',
- inputCodec: 'Float32',
- channels: 1,
- sampleRate: samples,
- flushTime: 1000
- });
- let wavesurfer = WaveSurfer.create({
- container: '#pcmGraph',//容器
- waveColor: '#FF55C5',
- progressColor: '#00BFBF',
- split: false,
- minPxPerSec: 18,
- audioContext: player.audioCtx,
- drawingContextAttributes: {
- desynchronized: false
- },
- height: 128,
- // barWidth: 0.8,
- barHeight: 13,
- splitChannels: false,
- audioRate: '1',
- plugins: [
- WaveSurfer.spectrogram.create({
- container: '#stftGraph',
- labels: true,
- colorMap: colors,
- fftSamples: 1024,
- // height: 400,
- frequencyMax:samples/2,
- }),
- ]
- });
- function drawFFTGraph(data) {
- // return
- let newFFT = [];
- // 找最大值
- let max = 0;
- for (let i = 0; i < 1024; i++) {//data.length
- if (i < 10) {
- data[i] = 0
- }
- if (data[i] > max) {
- max = data[i];
- }
- }
- // 归一
- for (let i = 0; i < 1024; 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();
- }
- // jiangkai js
- // play command value
- var play_cmd = document.getElementById("ws_msg").value;
- var stop_cmd = "stop";
- // var isPlay = false
- var connBtn = document.getElementById("conn_btn");
- var playBtn = document.getElementById("play_btn");
- var stopBtn = document.getElementById("stop_btn");
- playBtn.setAttribute('disabled', 'disabled');
- stopBtn.setAttribute('disabled', 'disabled');
- var objSocket;
- function connectWS() {
- //测试
- var wsServer = document.getElementById("ws_url").value;
- /**
- WebSocket服务连接
- */
- objSocket = new WebSocket(wsServer)
- objSocket.onopen = function (evt) {
- onOpen(evt)
- }
- objSocket.onclose = function (evt) {
- onClose(evt)
- }
- objSocket.onmessage = function (evt) {
- onMessage(evt)
- }
- objSocket.onerror = function (evt) {
- onError(evt)
- }
- connBtn.setAttribute('disabled', 'disabled');
- }
- function onOpen(evt) {
- console.log('Connected to WebSocket server.');
- playBtn.removeAttribute('disabled');
- stopBtn.removeAttribute('disabled');
- }
- function onClose(evt) {
- console.log('Disconnected')
- playBtn.setAttribute('disabled', 'disabled');
- stopBtn.setAttribute('disabled', 'disabled');
- connBtn.removeAttribute('disabled');
- }
- function onError(evt) {
- alert('Error occured: ' + evt.data);
- playBtn.setAttribute('disabled', 'disabled');
- stopBtn.setAttribute('disabled', 'disabled');
- connBtn.removeAttribute('disabled');
- }
- function onMessage(evt) {
- console.log(wavesurfer,"@xq");
- //websocket返回数据信息处理
- // console.log('Retrieved data from server: ' + evt.data.size)
- if (evt.data.size > 10) {
- var reader = new FileReader(); //文件阅读器
- reader.readAsArrayBuffer(evt.data); //读取成ArrayBuffer对象
- reader.onload = function () {
- //读取完毕
- // Now feed PCM data into player getting from websocket or ajax whatever the transport you are using.Accept ArrayBuffer or TypedArray
- // 接收PCM格式的原始数据,ArrayBuffer 类型或者 TypedArray 类型
- // player.feed(this.result);
- let input = new Float32Array(this.result);
- // 数据全部左移,使得小数点前有足够的整数部分, 然后取整
- let buf = new Int32Array(input.length);
- for (var i = 0; i < input.length; i++) {
- // buf[i] = input[i] * 10000000000;//100000000000
- buf[i] = input[i] * 5000000000;
- buf[i] = parseInt(buf[i]);
- }
- let uintBuf = new Uint32Array(buf);
- const audioDate = new Blob([addWavHeader(uintBuf, samples, 32, 2)]);
- wavesurfer.loadBlob(audioDate);
- drawFFTGraph(uintBuf);
-
- }
- setTimeout('objSocket.send(play_cmd)', 10000);
- }
- else {
- setTimeout('objSocket.send(play_cmd)', 10000);
- }
- }
- //发送消息
- 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');
- }
- // //李兆基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();
- if (objSocket.readyState === WebSocket.OPEN) {
- objSocket.send("close");
- objSocket.close(1000, "Disconnect");
- }
- playBtn.removeAttribute('disabled');
- }
- </script>
- </body>
- </html>
|