先看效果图：先录音，录音成功之后，把录音追加到列表，点击列表可以播放；录音完成之后上传录音，上传成功再语音识别。
微信官方文档https://developers.weixin.qq.com/doc/offiaccount/oa_web_apps/js-sdk.html
实现流程：
一、 公众号配置
1.js安全域名配置：登陆微信公众平台：公众号设置 -> 功能设置 -> js安全域名，域名写到根域名就行，把下载的txt文件放到域名对应的根目录下
2.配置ip白名单
二、代码展示
1.前端代码
用到了’startrecord’, ‘stoprecord’, ‘playvoice’, ‘uploadvoice’, ‘translatevoice’五个接口，先调用 startrecord 开始录音，再调用stoprecord 停止录音，会返回一个音频的本地id，把录音追加的html录音列表中，方便播放录音，使用playvoice 播放录音列表中的录音，再使用uploadvoice 把录音上传到微信服务器上，会返回微信服务器上的rverid（感觉上传录音没有使用到），通过使用本地音频id去识别语音
<!doctype html><html><head> <title>语音识别</title><meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><script type="text/javascript" src="/static/index/js/jquery.js"></script><script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script><link rel="stylesheet" type="text/css" href="/static/index/layui/css/layui.css"> <style> button{ height: 40px; width: 120px; margin: 25px; } #ul{ margin-top: 15px; height: 40px; line-height: 40px; text-align: center; padding: 5px; } #ul li{ width: 80%; } #ullist button{ width:98%; height:40px; border-radius:5; text-align: center; margin: 5px; } </style></head><body> <div class="container" style="width:100%"> <div class="row"> <ul class="list-unstyled" id="ullist"> </ul> </div> <div id="btn" class="navbar-fixed-bottom" style="ur-lect:none:align-content:center"> <center> <button id="talk_btn" type="button" class="layui-btn">录 音</button> <button id="uploadvoice" type="button" class="layui-btn layui-btn-normal">上传 录音</button><br> <button id="translatevoice" type="button" class="layui-btn layui-btn-danger" style="width:90%;">语音 识别</button><br> </center> </div> </div> <script type="text/javascript"> // 全局变量 var recordtimer = 300; var voice={ localid:'', rverid:'' } wx.config({ debug: fal, appid: '{$signpackage.appid}', timestamp: {$signpackage.timestamp}, noncestr: '{$路由器连接路由器设置signpackage.noncestr}', signature: '{$signpackage.signature}', jsapilist: [ // 所有要调用的 api 都要加到这个列表中 'startrecord', 'stoprecord', 'playvoice', 'uploadvoice', 'translatevoice' ] }); // 在这里调用 api wx.ready(function () { var start; var end; // 开始录音 $("#talk_btn").on('touchstart',function (event) { // console.log(event) event.preventdefault(); start = new date().gettime(); // 延迟后录音，避免误操作 recordtimer = ttimeout(function () { wx.startrecord({ success:function () { // 授权录音 localstorage.rainallowrecord = 'true'; }, cancel:function () { console.log('用户拒绝了录音'); } }); },300) }); //松手结束录音 $('#talk_btn').on('touchend', function(event){ event.preventdefault(); end = new date().gettime(); if((end - start) < 3000){ end = 0; start = 0; alert('录音时间不能少于3秒'); //小于300ms，不录音 cleartimeout(recordtimer); }el{ var mytime = new date().tolocaletimestring(); //获取当前时间 wx.stoprecord({ success: function (res) { voice.localid = res.localid; console.log(voice.localid) var str="<li audioid='"+voice.localid+"'><button class='layui-btn layui-btn-primary'>音频任务"+mytime+"</button></li>"; $("#ullist").append(str);//显示到列表 火车火车过山洞 }, fail: function (res) { alert(json.stringify(res)); } }); } }); }); 高中数学必修三 wx.error(function (res) { console.log(res) }); //list播放语音 $("ul").on("click", "li", function() { var audioid = $(this).attr("audioid"); wx.playvoice({ localid: audioid }); }) // 上传语音 $("#uploadvoice").click(function(){ //调用微信的上传录音接口把本地录音先上传到微信的服务器 wx.uploadvoice({ localid:voice.localid, // 需要上传的音频的本地id，由stoprecord接口获得 isshowprogresstips: 1, // 默认为1，显示进度提示 success:function(res){ if(res.errmsg == 'uploadvoice:ok'){ voice.rverid = res.rverid alert('录音上传成功'); }el{ alert(res.errmsg) } } }) }) // 语音识别 $("#translatevoice").click(function(){ wx.translatevoice({ localid:voice.localid, // 需要识别的音频的本地id，由录音相关接口获得 isshowprogresstips:1, // 默认为1，显示进度提示 success:function(res){ console.log(res) if(res.errmsg == "translatevoice:ok"){ alert(res.translateresult); // 语音识别的结果 }el{ alert(res.errmsg) } } }) })</script></body></html>后端代码（php）
wechat.php 此类主要是获取accesstoken和jsapiticket
<?phpnamespace app\index\controller;u think\controller;/** * 微信类 */class wechat extends controller{ protected $appid = 'xxxxxxxxxxxxx'; protected $appcret = 'xxxxxxxxxxxxxxxxxx'; /** * 微信服务器配置时 验证token的url */ public function checktoken() { header("content-type: text/html; chart=utf-8"); //1.将timestamp,nonce,toke按字典顺序排序 $timestamp = $_get['timestamp']; $nonce = $_get['nonce']; $token = 'asd123456zxc'; $signature = $_get['signature']; $array = array($timestamp,$nonce,$token); //2.将排序后的三个参数拼接之后用sha1加密 $tmpstr = implode('',$array); $tmpstr = sha1($tmpstr); //3.将加密后的字符串与signature进行对比，判断该请求是否来自微信 if($tmpstr == $signature){ echo $_get['echostr']; exit; } } /** * curl请求 */ public function http_curl($url, $type = 'get', $res = 'json', $arr = ''){ $cl = curl_init(); curl_topt($cl, curlopt_url, $url); curl_topt($cl, curlopt_returntransfer, 1); curl_topt($cl, curlopt_ssl_verifypeer, fal); curl_topt($cl, curlopt_ssl_verifyhost, fal); if($type == 'post'){ curl_topt($cl, curlopt_post, 1); curl_topt($cl, curlopt_postfields, $arr); } $output = curl_exec($cl); curl_clo($cl); return json_decode($output, true); if($res == 'json'){ if( curl_error($cl)){ return curl_error($cl); }el{ return json_decode($output, true); } } } /** * 获取 accesstoken */ public function getaccesstoken() { $url = "/d/file/titlepic/token // 先判断 access_token 文件里的token是否过期，没过期继续使用，过期就更新 $data = json_decode($this->get_php_file(root_path."public".ds."wxtxt".ds."access_token.txt")); // 过期 更新 if ($data->expire_time < time()) { $res = $this->http_curl($url); $access_token = $res['access_token']; if ($access_token) { // 在当前时间戳的基础上加7000s (两小时) $data->expire_time = time() + 7000; $data->access_token = $res['access_token']; $this->t_php_file(root_path."public".ds."wxtxt".ds."access_token.txt",json_encode($data)); } }el{ // 未过期 直接使用 $access_token = $data->access_token; } return $access_token; } /** * 获取 jsapiticket */ public function getjsapiticket() { // 先判断 jsapi_ticket是否过期 没过期继续使用，过期就更新 $data = json_decode($this->get_php_file(root_path."public".ds."wxtxt".ds."jsapi_ticket.txt")); if ($data->expire_time < time()) { // 过期 更新 $accesstoken = $this->getaccesstoken(); $url = "/d/file/titlepic/getticket $res = $this->http_curl($url); $ticket = $res['ticket']; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $this->t_php_file(root_path."public".ds."wxtxt".ds."jsapi_ticket.txt",json_encode($data)); } }el{ $ticket = $data->jsapi_ticket; } return $ticket; } // 获取存储文件中的token ticket private function get_php_file($filename) { return trim(file_get_contents($filename)); } // 把token ticket 存储到文件中 private function t_php_file($filename, $content) { $fp = fopen($filename, "w"); fwrite($fp, $content); fclo($fp); }}wxmedia.php 此类是返回语音识别的配置信息
<?phpnamespace app\index\controller;u think\controller;u app\index\controller\wechat;/** * 微信语音识别 */class wxmedia extends wechat{ /** * 语音识别 */ public function index() { $signpackage = json_decode($this->getsignpackage(),true); $this->assign('signpackage',$signpackage)我们是谁; return $this->fetch(); } /** * 生成签名 */ public function getsignpackage() { // 实例化微信操作类 $wx = new wechat(); // 获取 ticket $jsapit初二历史下册复习提纲icket = $wx->getjsapiticket(); // 注意 url 一定要动态获取，不能 hardcode. $protocol = (!empty($_rver['https']) && $_rver['https'] !== 'off' || $_rver['rver_port'] == 443) ? "https://" : "http://"; // 当前页面的url $url = "$protocol$_rver[http_host]$_rver[request_uri]"; $timestamp = time(); //生成签名的时间戳 $noncestr = $this->createnoncestr(); //生成前面的随机串 // 这里参数的顺序要按照 key 值 ascii 码升序排序 $string = "jsapi_ticket=$jsapiticket&noncestr=$noncestr×tamp=$timestamp&url=$url"; // 对string进行sha1加密 $signature = sha1($string); $signpackage = array( "appid" => $wx->appid, "noncestr" => $noncestr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawstring" => $string ); return json_encode($signpackage); } /** * 生成签名的随机串 */ private function createnoncestr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } }项目源码：
本文发布于:2023-04-08 12:21:06，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/cf9d61060fa037b19a6aa085577a076e.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：微信开发之JS.doc
本文 PDF 下载地址：微信开发之JS.pdf
| 留言与评论（共有 0 条评论） |
