2017SignalSystem_Team3_VoiceInput/show_wave.html at master · csielee/2017SignalSystem_Team3_VoiceInput · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>成大資訊 2017 訊號與系統 第3組 - demo1</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="musicshow"></div>
    <div id="textshow" style="width:100%;text-align:center">所有辨識結果:<br></div>
    <div id="currtextshow" style="width:100%;text-align:center"></div>
    <script lang="text/javascript">
      window.onload = function(){
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
        var textshow =  document.getElementById("textshow");
        var currtextshow = document.getElementById("currtextshow");
      }
      var musicchart;
      //var musicdata = [];
      //var textdata = [];
      musicchart = new Highcharts.Chart({//chart1就是這個圖表本身，可以在建立完成後操作
        chart: {
          renderTo: 'musicshow',//目標的div
          type: 'line'//圖表的種類
        },
        title: {
          text: '辨識結果:'//標題
        },
        yAxis : {
          max:1,
          min:-1
        },
        series: [{//這裡是圖表的資料
          name: 'voice',
          data: []
        }]
      });

      if (!('webkitSpeechRecognition' in window)) {
        alert('你無法執行該網頁');
      } else {
        alert('你可以執行該網頁');
        var start,end,elapsed;
        start = new Date();
        var recognition = new webkitSpeechRecognition();
        recognition.continuous = true;
        recognition.interimResults = true;
        recognition.lang="cmn-Hant-TW";

        var microphone,scriptNode;
        recognition.onstart=function(){
          console.log('開始辨識...');

          var context = new AudioContext();
          navigator.getUserMedia({audio: true}, function(stream) {
            microphone = context.createMediaStreamSource(stream);
            scriptNode = context.createScriptProcessor(4096, 1, 1);

            scriptNode.onaudioprocess = function(audioProcessingEvent) {
              // The input buffer is the song we loaded earlier
              var inputBuffer = audioProcessingEvent.inputBuffer;
              var outputBuffer = audioProcessingEvent.outputBuffer;
              // Loop through the output channels (in this case there is only one)
              for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
                //console.log(inputBuffer.getChannelData(channel));
                //musicdata.push(inputBuffer.getChannelData(channel))
                musicchart.series[0].setData(inputBuffer.getChannelData(channel));
                //musicchart.series[1].setData(musicdata);
              }
            }

            microphone.connect(scriptNode);
            scriptNode.connect(context.destination);
          }, function(){
            console.log('error');
          });
        };
        recognition.onend=function(){
          console.log('停止辨識!');
          microphone.disconnect();
          scriptNode.disconnect();
          alert('語音辨識已停止')
        };

        recognition.onresult=function(event){
          console.log(event);
          var str = event.results[event.resultIndex][0].transcript;
          console.log(str);
          musicchart.setTitle( {text : "辨識結果:"+str});
          currtextshow.innerHTML = str;
          if (event.results[event.resultIndex].isFinal) {
            textshow.innerHTML = textshow.innerHTML + str + "<br>";
            currtextshow.innerHTML = "";
          }
          if (str.match("停")!=null)
            recognition.stop();
        };

        recognition.start();
      }
    </script>
  </body>
</html>