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

前端实践 专栏收录该内容
19 篇文章 2 订阅

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

  • 0
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
其实作为H5想要做语音识别,自认为还说有各种弊端得,同时还是微信公众号里面,如果小程序得话,或许会简单一点,但是这里是在公众号里面开发,在这个过程中查阅个各种资料,其实里面得东西都大同小异,但是大多数并不全, 首先微信公众号里面得H5开发语音录入,试过各种方法,由于是java渣渣,页面技术只是了解简单得,因此在使用标签得时候,本身并不能适用于当前得需求,因此最后只能选择了微信自带得录音功能,使用微信提供的接口,(具体得接口使用还是去看微信接口得使用) 由于使用微信得接口得话,首先要上传到它得服务器上面去(虽然也有本地得文件储存id,但是好像并没有用),这里就涉及到了一个serverid,这个值是存在于微信临时素材库得id,后期要用它来获取录音得文件。 通过微信提供得获取临时素材文件得接口,得到了文件(具体方法网上一搜一大堆,后期我也会将完整得代码放进资源里面),但是这里有一个坑得问题,他的格式为.amr得格式,但是最后的目的是转换为文字,因此这里涉及到了格式转换 主要用了现成得技术,也是通过下载资源获取得jar以及实现得方法,将.amr转换为了MP3格式 然后就就是最后一部了,将mp3得音频文件转换为文字,我这里用的是讯飞得技术,当然百度得也可以, 其实整个需求得这个流程已经完成了,但是不得不说里面遇到得坑,由于是渣渣,除了人们总说的,转换为mp3得时候会报N/A得错误,我还遇到了unkowFormat这个错误。 这里只是记录一下自己在查询资料时没有一个符合自己需求得资料,同时也希望以后有这样需求得人,可以将思路捋的更加清楚,也可以进行交流.
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值