使用Html5多媒体实现微信语音功能

随着微信等社交App的兴起，语音聊天成为很多App必备功能，大到将语音聊天作为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。

但是很多人感觉网页端语音离我们很遥远，这些更多是本地应用的工作，其实不然，随着Html5的发展，语音功能也渐渐成为前端必会的功能之一。

为什么要学会HTML5 的语音呢？

1.Html5 规范推进，手机的更新加速了操作系统更新，语音功能将会变成前端主要的工作之一，就像现在的canvas一样。前端实现语音功能开发速度更快，更节省人力（这意味着给老板省钱，给老板省钱就是在给自己涨工资）

2.即使是现在本地应用做语音功能，熟悉前端语音交互的各种坑能够让你们的同事关系更和谐，协作更顺畅，而不是互相掐架。

3.了解新的技术可以一方面，防止自己被面试官问倒，二来可以预判技术潮流，不至于学了一堆屠龙之技或者墨守成规，更有利于让自己的知识和职业核心竞争力一直处在食物链的顶端。

4.前端大部分人对语音功能有误解，以为语音功能就是HTML5 audio标签而已，事实上真的不是那么简单的"而已"

不墨迹那么多，咱们直接开发一个小项目啥都明明白儿白儿了，先看效果图

业务逻辑非常简单，

跟我们微信用法一模一样，手按下去字变成松开结束，同时说话被录下来，松手的时候，变成按下结束，同时发送语音给对方

我们一步一步一步来，首先我们先整一个html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微信语音</title>
    <link rel="stylesheet" href="css/record.css">
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div id="left">
                <i class="material-icons">
                    chevron_left
                </i>
                微信(184)
            </div>
            <div id="mid">艾达·王</div>
            <div id="right">
                <i class="material-icons">
                    more_horiz
                </i>
            </div>
        </header>
        <div id="contentWrap">
            <ul id="chatList">
                <li class="item_me">
                    <div class="chatContent">我是不是你最疼爱的人?
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" >
                    </div>
                    <div class="chatContent">奔跑吧，兄弟！（滚犊子）
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">这里我就不多说了，上来就是一梭子代码……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" >
                    </div>
                    <div class="chatContent">大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">老妹儿，你是不是喜欢上我了呢……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" >
                    </div>
                    <div class="chatContent">不是，我晕船，看见你想吐……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
            </ul>
        </div>
        <footer id="footer">
            <div id="keyboard">
                <i class="material-icons">
                    keyboard
                </i>
            </div>
            <div id="sayBtn">
                <span id="sendBtn" class="sendBtn">按下 说话</span>
            </div>
            <div id="icon"><i class="material-icons">
                    sentiment_satisfied
                </i></div>
            <div id="add"><i class="material-icons">
                    add_circle_outline
                </i></div>
        </footer>
    </div>
</body>

</html>

css部分，

*{
    margin: 0;
    padding: 0;
}
ul li{ list-style: none;}
html,body{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body{
    background: #ebebeb;
}
@font-face {
    font-family: ‘Material Icons‘;
    font-style: normal;
    font-weight: 400;
    src: url(../css/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local(‘Material Icons‘),
      local(‘MaterialIcons-Regular‘),
      url(../css/iconfont/MaterialIcons-Regular.woff) format(‘woff2‘),
      url(../css/iconfont/MaterialIcons-Regular.woff2) format(‘woff‘),
      url(../css/iconfont/MaterialIcons-Regular.ttf) format(‘truetype‘);
  }

  .material-icons {
    font-family: ‘Material Icons‘;
    font-weight: normal;
    font-style: normal;
    font-size: 32px;  /* Preferred icon size */
    display: inline-block;
    /* line-height: 0.01rem; */
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: ‘liga‘;
  }
#wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
#header{
    height: 46px;
    line-height: 46px;
    background: #363539;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: space-between;
}

#header #left{
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 100px;
}
#header #right{
    display: flex;
    align-items: center;
    width: 100px;
    justify-content: flex-end;

}
#header #right i{
    padding-right: 6px;
}
#header #mid{
    text-align: center;
    flex: 1;
}
#contentWrap{
    flex: 1;
    overflow-y:auto;
}

.item_me,.item_audio{
    display: flex;
    align-items: flex-start;
    justify-content:flex-end;
    padding: 8px;
}
.item_you{
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    padding: 8px;
}
.avatar{
    width: 40px;
    height: 40px;
}
.avatar img{width: 100%;}
.item_me .chatContent{
    padding: 10px;
    background: #a0e75a;
    border: 1px solid #6fb44d;
    margin-right: 15px;
    border-radius: 5px;
    position: relative;
}
.chatContent span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.item_me .chatContent span.bot{
    border-width:8px;
    border-style:solid dashed dashed;
    border-color: transparent transparent transparent #6fb44d;
    right:-17px;
    top:10px;
}
.item_me .chatContent span.top{
    border-width:8px;
    border-style:solid dashed dashed;
    border-color:transparent transparent transparent #a0e75a ;
    right:-15px;
    top:10px;
}
.item_you .chatContent{
    padding: 10px;
    background: #a0e75a;
    border: 1px solid #6fb44d;
    margin-left: 15px;
    border-radius: 5px;
    position: relative;
}
.item_you .chatContent span.bot{
    border-width:8px;
    border-style:solid dashed dashed;
    border-color: transparent #6fb44d transparent transparent ;
    left:-17px;
    top:10px;
}
.item_you .chatContent span.top{
    border-width:8px;
    border-style:solid dashed dashed;
    border-color:transparent #a0e75a transparent transparent  ;
    left:-15px;
    top:10px;
}        

#footer{
    height: 46px;
    padding: 0 4px;
    background: #f4f5f6;
    border-top: 1px solid #d7d7d8;
    display: flex;
    align-items: center;
    color: #7f8389;
    justify-content: space-around;
}
#sayBtn{
    flex: 1;
    display: flex;
    margin: 0 5px;
    color:#565656;
    font-weight: bold;
}
.sendBtn{
    display: block;
    flex: 1;
    padding: 8px;
    background: #f4f5f6;
    border:1px solid #bec2c1;
    border-radius: 5px;
    text-align: center;

}
.activeBtn{
    display: block;
    flex: 1;
    padding: 8px;
    background: #c6c7ca;
    border:1px solid #bec2c1;
    border-radius: 5px;
    text-align: center;
}
.item_audio .chatContent{
    padding: 6px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    margin-right: 15px;
    position: relative;
    width:120px;
    min-height: 20px;

}
.item_audio .chatContent span.bot{
    border-width:8px;
    border-style:solid dashed dashed;
    border-color: transparent transparent transparent #999;
    right:-17px;
    top:10px;
}
.item_audio .chatContent span.top{
    border-width:8px;
    border-style:solid dashed dashed;
    border-color:transparent transparent transparent #fff ;
    right:-15px;
    top:10px;
}
.material-icons_wifi{
    transform: rotate(90deg);
    color: #a5a5a5;
    font-size: 22px;
}
.redDot{
    background: #f45454;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 10px;
}

这里我说两个注意点，

1.html部分：

图省事我并没有像素级切图，图省事我也直接用了svg图标，具体库我使用的是

https://material.io/tools/icons/?style=outline

2.css部分：使用flex布局。我只是为了讲解Html5功能，所以flex并没有写兼容性写法，另外App头部部分写法大家注意一下，那里是非常常用的。

下面说重点js部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微信语音</title>
    <link rel="stylesheet" href="css/record.css">
    <script>
        document.addEventListener(‘DOMContentLoaded‘, function () {

            var oSendBtn = document.getElementById(‘sendBtn‘);
            var soundClips = document.querySelector(‘.sound-clips‘);
            var mediaRecorder;
            var oChatList = document.getElementById(‘chatList‘);
            navigator.getUserMedia = (navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(
                    // constraints - only audio needed for this app
                    {
                        audio: true
                    })
                    // Success callback
                    .then(function (stream) {
                        rec(stream);
                    })

                    // Error callback
                    .catch(function (err) {
                    }
                    );
            } else {
            }
             function rec(stream) {
                mediaRecorder = new MediaRecorder(stream);
                oSendBtn.addEventListener(‘touchstart‘, function (ev) {
                    ev.preventDefault();
                    this.innerHTML = ‘松开 结束‘;
                    this.classList.add(‘activeBtn‘);
                    mediaRecorder.start();
                }, false);
                oSendBtn.addEventListener(‘touchend‘, function (ev) {
                    ev.preventDefault();
                    this.innerHTML = ‘按下 说话‘;
                    this.classList.remove(‘activeBtn‘);
                    mediaRecorder.stop();
                }, false);
                mediaRecorder.ondataavailable = function (e) {
                    var clipContainer = document.createElement(‘li‘);
                    var audio = document.createElement(‘audio‘);
                    clipContainer.classList.add(‘item_audio‘);
                    clipContainer.innerHTML = `
                    <div class = "redDot"></div>
                    <div class="chatContent">
                        <i class="material-icons material-icons_wifi">wifi</i>
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>`;
                    audio.setAttribute(‘controls‘, ‘‘);
                    oChatList.appendChild(clipContainer);
                    var audioURL = window.URL.createObjectURL(e.data);
                    audio.src = audioURL;
                    oChatList.addEventListener(‘touchstart‘, function (ev) {
                        if (ev.srcElement.parentNode.className!== ‘item_audio‘) return;
                        audio.play();
                        ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])
                    }, false);
                };
            }
        }, false);
    </script>
</head>

<body>
    <div id="wrap">
        <header id="header">
            <div id="left">
                <i class="material-icons">
                    chevron_left
                </i>
                微信(184)
            </div>
            <div id="mid">艾达·王</div>
            <div id="right">
                <i class="material-icons">
                    more_horiz
                </i>
            </div>
        </header>
        <div id="contentWrap">
            <ul id="chatList">
                <li class="item_me">
                    <div class="chatContent">我是不是你最疼爱的人?
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" >
                    </div>
                    <div class="chatContent">奔跑吧，兄弟！（滚犊子）
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">这里我就不多说了，上来就是一梭子代码……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" >
                    </div>
                    <div class="chatContent">大彬哥，你说你咋这么优秀呢？看见你我有一种大海的感觉
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
                <li class="item_me">
                    <div class="chatContent">老妹儿，你是不是喜欢上我了呢……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>
                </li>
                <li class="item_you">
                    <div class="avatar">
                        <img src="images/ava2.jpg" >
                    </div>
                    <div class="chatContent">不是，我晕船，看见你想吐……
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>

                </li>
            </ul>
        </div>
        <footer id="footer">
            <div id="keyboard">
                <i class="material-icons">
                    keyboard
                </i>
            </div>
            <div id="sayBtn">
                <span id="sendBtn" class="sendBtn">按下 说话</span>
            </div>
            <div id="icon"><i class="material-icons">
                    sentiment_satisfied
                </i></div>
            <div id="add"><i class="material-icons">
                    add_circle_outline
                </i></div>
        </footer>
    </div>
</body>

</html>

这里实现的录影功能要注意的点很多，我们一个个说，

第一个东西，

navigator.getUserMedia = (navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(

                    {
                        audio: true
                    })
                    // Success callback
                    .then(function (stream) {
                        rec(stream);
                    })

                    // Error callback
                    .catch(function (err) {
                    }
                    );
            } else {

            }

当大家看一些html5关于录音的接口的时候，你看到这个

Navigator.getUserMedia()

就要小心了，这个是老规范的东西了，被废了，新的是

navigator.mediaDevices.getUserMedia

html5 多媒体里面的语音这块换了好几茬规范，很乱，有些标签甚至一个浏览器都没实现过，未曾绽放就枯萎了，你也不用关心也没必要浪费那个时间知道，你只要知道我说这些就够了，因为你知道那些被废掉的过往没啥用，有那个时间还不如来一局LOL或者王者荣耀（虽然我并不懂二者的区别，不过这两个游戏应该都挺好玩吧）。

里面的东西大家也不需要看懂，什么promise了，什么媒体流了，你不用知道，你就知道这样一件事就行了，

上面的代码就相当于打开了水龙头（或者说按下的录音机的录音键），那么我们得有东西接着水啊，我们可以用电饭锅（录音机的话就是磁带）放水龙头下面看着它往里面射，如下代码

mediaRecorder = new MediaRecorder(stream);

接下来就是，一按按钮就生米煮成熟饭了，对应录音机就是录完了按按钮就播放了，但是在我们程序里面要想播放你不仅要有磁带，还得有录音机，录音机就是audio标签，没有好办，我们new一个。这个世界上没有什么对象是程序员不敢new的，new一个不行，就new两个。剩下的代码除了吓人之外，没啥缺点，简单的令人发指。

mediaRecorder.ondataavailable = function (e) {
                    var clipContainer = document.createElement(‘li‘);
                    var audio = document.createElement(‘audio‘);
                    clipContainer.classList.add(‘item_audio‘);
                    clipContainer.innerHTML = `
                    <div class = "redDot"></div>
                    <div class="chatContent">
                        <i class="material-icons material-icons_wifi">wifi</i>
                        <span class="bot"></span>
                        <span class="top"></span>
                    </div>
                    <div class="avatar">
                        <img src="images/ava1.png" >
                    </div>`;
                    audio.setAttribute(‘controls‘, ‘‘);
                    oChatList.appendChild(clipContainer);
                    var audioURL = window.URL.createObjectURL(e.data);
                    audio.src = audioURL;
                    oChatList.addEventListener(‘touchstart‘, function (ev) {
                        if (ev.srcElement.parentNode.className!== ‘item_audio‘) return;
                        audio.play();
                        ev.srcElement.parentNode.removeChild(ev.srcElement.parentNode.children[0])
                    }, false);
                };

其实就是录好了就播。

OK，是不是很简单 ，整个项目我说几个点吧：

1.切图结构合理是你后面做功能的前提，结构做的好，后面就省事，想想诸葛亮吧，未出茅庐人家就把html5结构搭好了，有三个section.

2.原生js和ES6的基础打牢可以为你提供不同的思路，比如我这里就使用了事件委托，还有ES6模板引擎。尤其是事件委托，不用的话查找节点很麻烦，另外代码套来套去也容易乱。

3.新的 知识和技术其实并不复杂，其实很简单，你想如果新技术不是为了让功能更好实现，更能解决我们的问题，那开发新技术干嘛？因为那帮大胡子的大牛们没事干怕被领导说工作量不饱和？技术是为了解决问题和让我们生活更美好服务的。

4.这个项目IOS 11以下跑不通，因为IOS 11.2之前不支持这个方法，需要IOS本地应用开发人员给你提供支援，但是在android下面是很OK的。而且可以预见，再过几年IOS 原生也不用给你支援都支持了，那你开发效率得多高。不要以为这些技术很遥远，html5真正商用也不过15年左右（vue 、react、angular大规模使用才几年？），机会留给有准备的人。

整个项目细节和要注意的点还是很多的，希望大家真正自己敲一遍，因为你看懂了我的文章跟你会用这个技术两码事，祝大家在前端的路上越走越远（记得常回来看看^_^）。

原文地址：http://blog.51cto.com/13592288/2328050

时间： 2024-08-01 10:10:18

使用Html5多媒体实现微信语音功能的相关文章

HTML5+weui仿微信聊天功能、长按删除功能

最近由于项目需要, 就运用html5+css3+weui+jquery实现的微信聊天小案例,可发表图像.红包.打赏...功能, 还可以长按删除消息... 案例截图如下: HTML及Js片段: <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8" /> <title>消息上墙</title> <meta name=&qu

利用html5实现类似微信的手机摇一摇功能

利用html5实现类似微信的手机摇一摇功能,并播放音乐. 1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向等. 2.  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据. 不多说直接上代码, Javascript: [javascript] view plaincopy var SHAKE_THRESHOLD = 3000; var last_update = 0;

微信卡券功能相关策略调整 类目库存等进行修改

双11狂欢活动微信的战绩应该不是很好,很少看到相关数据报道,现在微信发布卡券功能相关策略调整公告,微信卡券功能正式向直供型电商开放申请了,这是在亡羊补牢吗?(11月11日,腾讯低调庆祝了16岁生日,并在晚间宣布上线有“免费通话”功能的“微信电话本”.用户已超8亿的微信,再次试图通过“过顶传球”颠覆运营商最根本的语音业务.) 以下是微信团队的系统公告 卡券功能相关策略调整 卡券功能在原有基础上做出多项优化.改进,以下是最核心的五点: 一.卡券功能正式向直供型电商开放申请 经过开放策略的调整和申请流

微信核心功能全解析

最近做了一套及时通讯软件,其中很多功能和微信是相仿的,下面详细介绍一下具体实现. 做及时通讯肯定要用xmpp协议,微信和一些及时通讯软件也是用的这套协议,只是纵向开发深度不同. 1.复写语音按钮 @SuppressLint("NewApi") public class RecordButton extends Button  { public RecordButton(Context context) { super(context); init(); } public RecordB

html5 跳到拨打电话功能

在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服务器,调用sns等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url链接的方式,实现在Safari ios,香港服务器,Android 浏览器,webos 浏览器,塞班浏览器,IE,Operamini等主流浏览器,进行拨打电话功能. 1.最常用WEB页面J

Android微信自动回复功能

Android微信自动回复功能 本文原创,转载请经过本人准许. 写在前面: 最近接到老大的一个需求,要求在手机端拦截微信的通知(Notification),从而获得联系人和内容.之后将联系人和内容发送到我们的硬件产品上,展示出来之后,再将我们想回复内容传给微信,并且发送给相应联系人. 老大还提示我需要用AccessibilityService去实现它,当然在此之前我并不知道AccessibilityService是什么鬼,不过没关系, just do IT ! AccessibilityServ

如何玩转微信支付功能的原理和开发（转）

打开微信,各种营销信息霸占了我的眼球,以“微信支付+微信小店”的模式挑战阿里“支付宝+淘宝天猫”的模式开启了新纪元,腾讯此举是在革淘宝的命吗?有人说,微信对阿里最大的挑战,是把连接能力下发给了企业/用户,让企业/用户而不是平台自身发挥主动权和能动性来建立新的连接模式. 近年来,移动支付发展迅猛,移动支付已经成为了不可抵挡的发展趋势,其引领了新一轮的支付潮流.从某种角度来讲,反观移动互联网的迅速发展,对微信的快速发展起到了很大的推动力,其所蕴含的巨大潜力使其成为了市场争相抢夺的香饽饽.一时间各种支

公众号文章新增语音功能 让声音拉近粉丝的距离

罗胖的公众号比较独特,每天发一条语音,吸引了一大批粉丝.也许我们没有很多题材每天一段补脑语音,但我们可以在图文消息中添加一小段语音问候,拉近和关注用户的距离.没错,公众号文章新增语音功能就能实现上述功能. 公众号文章新增语音功能,可在文章中添加录制好的语音,且突破一分钟限制.暂时只面向获得微信认证或拥有原创功能的帐号公测. 1. 运营者可以在编辑图文消息时,在正文中添加语音.一个图文消息支持添加一个语音. 2. 可从素材库中添加已有语音,或新建语音. 3. 用户可以在文章中收听语音内容,可控制播

微信语音红包小程序开发如何提高精准度 红包小程序语音识别精准度 微信小程序红包开发语音红包

公司最近开发的一个微信语音红包,就是前些时间比较火的包你说红包小程序.如何提高识别的精准度呢. 在说精准度之前,先大概说下整个语音识别的开发流程.前面我有文章已经说到过了.具体我就不谈了.一笔带过. 先是通过小程序前端调动语音录制功能拿到客户说的语音,比如mp3格式,然后通过百度的语音识别算法,转为文字.具体看百度语音识别的接口.地址http://yuyin.baidu.com/docs/asr/188 返回的格式如下: // 成功返回 { "err_no": 0, "err