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

命运对每个人都是一样的,不一样的是各自的努力和付出不同,付出的越多,努力的越多,得到的回报也越多,在你累的时候请看一下身边比你成功却还比你更努力的人,这样,你就会更有动力。

导读:本篇文章讲解 H5网页实现语音识别音频文件-AI开放平台,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

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

前言

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

内容

     因为JS调用了Active控件作为音频的采集插件,所以这里需要允许插件的运行。
在这里插入图片描述

     选择本地的音频文件,识别的内容将弹窗显示。
在这里插入图片描述
     下面直接来看看html代码部分,完整代码如下:

<!DOCTYPE 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多行的代码就实现了对音频文件的内容识别还是蛮有趣的,需要配置的部分大家可以研究一下,荣幸与您分享~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/144229.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!