dingjun.hu
/
sounds_demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!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="53" onchange="changeNum(value)">
      </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 id="btn">获取数据</button>
    <button id="playAudio">播放</button> -->
    <div class="pcmGraph_wrapper">
      <span class="wrapper_span">时域波纹图</span>
      <div id="pcmGraph"></div>
    </div>
    <div class="wrapper">
      <!-- <span class="wrapper_span">时频域声纹图</span> -->
      <!-- <div id="stftGraph"></div> -->
      <span class="wrapper_span">时频域声纹图</span>
      <div id="wrapper_map_pcmGraph"></div>
      <div id="wrapper_map_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="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 = 125000;
    // 频域频谱图
    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: 3000
    });
    const offlineCtx = new OfflineAudioContext(1, 125000 * 40, 125000);
    let wavesurfer = WaveSurfer.create({
      container: '#pcmGraph',//容器
      waveColor: '#FF55C5',
      progressColor: '#00BFBF',
      split: false,
      minPxPerSec: 8,
      drawingContextAttributes: {
        desynchronized: false
      },
      height: 128,
      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: '#wrapper_map_stftGraph',
          colorMap: colors,
          height: 512,
          frequencyMax: 125000 / 2,
          labels: true,
        }),
      ],
    })
    wavesurfer.on("finish", () => {
      objSocket.send(play_cmd);
    });
    wavesurfer.on("ready", () => {
      wavesurfer.play()
    });

    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
    let 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);
          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++) {
            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, 1)]);
          wavesurfer_map.loadBlob(audioDate);
          wavesurfer.loadBlob(audioDate);
          drawFFTGraph(uintBuf);

        }
        // setTimeout('objSocket.send(play_cmd)', 1000);
      }
      else {
        setTimeout('objSocket.send(play_cmd)', 1000);
      }

    }


    //发送消息
    function startPlay() {
      objSocket.send(play_cmd);
      playBtn.setAttribute('disabled', 'disabled');
      wavesurfer.play();
    }

    //发送消息
    function startPlay2() {
    }

    //关闭连接
    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>

</html>