dingjun.hu
/
sounds_demo


			
							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>