<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语音识别-夜雨飘零</title>
    <script type="text/javascript" src="record.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
    <div>
        <a id="upload" onclick="uploadAudioFile()" class="file">短音频文件识别</a>
        <a id="upload_long" onclick="uploadLongAudioFile()" class="file">长音频文件识别</a>
        <img id="record_btn" onclick="record()" src="record.png" alt="录音"/>
        <img id="play_btn" onclick="play()" src="player.png" alt="播放"/>
        <a onclick="uploadRecordAudio()" class="file" id="upload_recod_btn">上传录音文件</a>
    </div>

    <div id="result">
        <textarea id="result_p"></textarea>
    </div>

    <div id="player">
        <audio controls autoplay></audio>
    </div>
</div>
<script>
    var is_recording = false;
    var is_playing = false;
    var recorder;
    var audio = document.querySelector('audio');


    function record() {
        if (is_recording) {
            is_recording = false;
            stopRecording()
            document.getElementById('record_btn').src = 'record.png'
        } else {
            is_recording = true;
            startRecording()
            document.getElementById('record_btn').src = 'recording.gif'
        }
    }

    function play() {
        if (is_playing) {
            is_playing = false;
            stopPlay()
            document.getElementById('play_btn').src = 'player.png'
        } else {
            is_playing = true;
            startPlay()
            document.getElementById('play_btn').src = 'stop.png'
        }
    }


    function startRecording() {
        HZRecorder.get(function (rec) {
            recorder = rec;
            recorder.start();
        });
    }

    function stopRecording() {
        recorder.stop();
    }

    function startPlay() {
        recorder.play(audio);
    }

    function stopPlay() {
        audio.pause();
    }

    function cancelAudio() {
        recorder.stop();
        recorder.clear();
    }

    function uploadRecordAudio() {
        recorder.upload(location.origin + "/recognition", function (state, e) {
            switch (state) {
                case 'uploading':
                    var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                    console.log(percentComplete);
                    break;
                case 'ok':
                    console.log(e.target.responseText)
                    document.getElementById('result_p').innerHTML = e.target.responseText
                    break;
                case 'error':
                    alert("上传失败");
                    break;
                case 'cancel':
                    alert("上传被取消");
                    break;
            }
        });
    }

    function uploadAudioFile(){
        var input = document.createElement("input");
        input.type = "file";
        input.accept = "audio/*";
        input.click();
        input.onchange = function(){
            var file = input.files[0];
            upload_file(location.origin + "/recognition", file, function (state, e) {
                switch (state) {
                    case 'uploading':
                        var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                        console.log(percentComplete);
                        break;
                    case 'ok':
                        console.log(e.target.responseText)
                        document.getElementById('result_p').innerHTML = e.target.responseText
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
        }
    }

    function uploadLongAudioFile(){
        var input = document.createElement("input");
        input.type = "file";
        input.accept = "audio/*";
        input.click();
        input.onchange = function(){
            var file = input.files[0];
            upload_file(location.origin + "/recognition_long_audio", file, function (state, e) {
                switch (state) {
                    case 'uploading':
                        var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                        console.log(percentComplete);
                        break;
                    case 'ok':
                        console.log(e.target.responseText)
                        document.getElementById('result_p').innerHTML = e.target.responseText
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
        }
    }

    // 上传音频文件
    upload_file = function (url, file, callback) {
        var fd = new FormData();
        // 上传的文件名和数据
        fd.append("audio", file);
        var xhr = new XMLHttpRequest();
        xhr.timeout = 60000
        if (callback) {
            xhr.upload.addEventListener("progress", function (e) {
                callback('uploading', e);
            }, false);
            xhr.addEventListener("load", function (e) {
                callback('ok', e);
            }, false);
            xhr.addEventListener("error", function (e) {
                callback('error', e);
            }, false);
            xhr.addEventListener("abort", function (e) {
                callback('cancel', e);
            }, false);
        }
        xhr.open("POST", url);
        xhr.send(fd);
    }

</script>

</body>
</html>