<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>语音识别-夜雨飘零</title>
    <script type="text/javascript" src="/static/record.js"></script>
    <link href="/static/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
    <h1>夜雨飘零语音识别</h1>
</div>
<div id="content">
    <div>
        <a id="upload" onclick="uploadAudioFile()" class="file">选择音频文件</a>
        <a id="play_btn" onclick="uploadRecordAudio()" class="file">上传录音</a>
        <audio controls autoplay></audio>
        <img id="record_btn" onclick="record()" src="/static/record.png" alt="录音"/>
    </div>
    <div id="result">
        <label for="result_p"></label><textarea id="result_p"></textarea>
    </div>
    上传进度：<progress id="progress1" value="0" max="100"></progress>&nbsp;<text id="progress_text"></text>
</div>
<script>
    let is_recording = false;
    let is_playing = false;
    let host = location.origin;
    let recorder;
    let audio = document.querySelector('audio');
    let textarea = document.getElementById('result_p')
    let progress1 = document.getElementById('progress1')
    let progress_text = document.getElementById('progress_text')


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

    function play() {
        if (is_playing) {
            is_playing = false;
            stopPlay()
            document.getElementById('play_btn').innerText = '播放音频'
        } else {
            is_playing = true;
            startPlay()
            document.getElementById('play_btn').innerText = '停止播放'
        }
    }

    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(host + "/recognition", function (state, e) {
            switch (state) {
                case 'uploading':
                    const percentComplete = Math.round(e.loaded * 100 / e.total);
                    console.log(percentComplete + '%');
                    // 弹出进度条
                    progress1.value = percentComplete
                    progress_text.innerText = percentComplete + '%'
                    break;
                case 'ok':
                    console.log(e.target.responseText)
                    textarea.value = e.target.responseText
                    break;
                case 'error':
                    alert("上传失败");
                    break;
                case 'cancel':
                    alert("上传被取消");
                    break;
            }
        });
    }

    // 上传音频文件
    function uploadAudioFile() {
        const input = document.createElement("input");
        input.type = "file";
        input.accept = "audio/*,video/*";
        input.click();
        input.onchange = function () {
            const file = input.files[0];
            console.log(file)
            audio.src = window.URL.createObjectURL(file);
            stopPlay();
            upload_file(host + "/recognition", file, function (state, e) {
                switch (state) {
                    case 'uploading':
                        const percentComplete = Math.round(e.loaded * 100 / e.total);
                        console.log(percentComplete + '%');
                        // 弹出进度条
                        progress1.value = percentComplete
                        progress_text.innerText = percentComplete + '%'
                        break;
                    case 'ok':
                        console.log(e.target.responseText)
                        textarea.value = e.target.responseText
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            });
        }
    }

    // 上传音频文件
    upload_file = function (url, file, callback) {
        const fd = new FormData();
        // 上传的文件名和数据
        fd.append("audio", file);
        const 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>