H5网页实现语音识别音频文件-AI开放平台

H5网页实现语音识别音频文件-AI开放平台

  • 前言
  • 内容
  • 小结

前言

     做了一个在Web端实现音频文件识别的Demo,下面一起来看

内容

     因为JS调用了Active控件作为音频的采集插件,所以这里需要允许插件的运行。
H5网页实现语音识别音频文件-AI开放平台_第1张图片

     选择本地的音频文件,识别的内容将弹窗显示。
H5网页实现语音识别音频文件-AI开放平台_第2张图片
     下面直接来看看html代码部分,完整代码如下:


<html>
<head>
    <meta charset="utf-8">
    <title>语音识别title>
    <input id="file" type="file" onchange="change();"/>
head>
html>
<script type="text/javascript">
    //识别音频文件
    function submitToBaiduAI(speechInfo, size) {
        let resultInfo;
        let speech = speechInfo;
        let xmlHttp = new XMLHttpRequest();
        //配置百度openId
        let url1 = "http://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=ochASHU2Kn16MABQ9Qz3W5ce&client_secret=IeVAgaKPkwjTNth6DI0Gc50wWmrTabdw";
        let xmlHttp2 = new XMLHttpRequest();
        let url2 = "http://vop.baidu.com/server_api";
        xmlHttp.open("POST", url1, true);
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    let httpResultToken = JSON.parse(xmlHttp.responseText);
                    let token = httpResultToken.access_token;
                    let setRequestInfo = new Object;
                    setRequestInfo.format = "m4a";
                    setRequestInfo.rate = 16000;
                    setRequestInfo.cuid = "JAVA";
                    setRequestInfo.channel = "1";
                    setRequestInfo.len = size;
                    setRequestInfo.dev_pid = 1537;
                    setRequestInfo.token = token;
                    setRequestInfo.speech = speech;
                    xmlHttp2.open("POST", url2, true);
                    xmlHttp2.onreadystatechange = function () {
                        if (xmlHttp2.readyState == 4) {
                            if (xmlHttp2.status == 200) {
                                let result = JSON.parse(xmlHttp2.responseText);
                                if (result.err_no == '0') {
                                    resultInfo = result.result;
                                    alert(resultInfo);
                                } else {
                                    resultInfo = "error:未听清楚";
                                }
                            } else {
                                resultInfo = "error:提交异常";
                            }
                        }
                    };
                    let setRequestInfoJSON = JSON.stringify(setRequestInfo);
                    console.log(setRequestInfo);
                    console.log(setRequestInfoJSON);
                    xmlHttp2.send(setRequestInfoJSON);
                } else {
                    resultInfo = "error";
                }
            }
        };
        xmlHttp.send(null);
    }
    //获取音频文件
    function change() {
        let speechInfo;
        let file = document.getElementById("file").files[0];
        let size = file.size;
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            speechInfo = reader.result;
            speechInfo = speechInfo.substring(speechInfo.indexOf('base64,') + 7);
            console.log(speechInfo);
            submitToBaiduAI(speechInfo, size);
        };
    }
script>

小结

      这里主要依赖了百度的AI开方平台,50多行的代码就实现了对音频文件的内容识别还是蛮有趣的,需要配置的部分大家可以研究一下,荣幸与您分享~

你可能感兴趣的:(前端实践)