HTML5网页页面音频和提交到服务器适用PC、Androi

日期:2021-02-26 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

提前准备做1个网页页面版闲聊页面,小表情啊、照片啊、提交文档啊都应当要有,视頻即使了,视频语音還是要的。

本文纪录的是在网页页面上用GitHub上的Recorder开展线上音频和提交到服务器。

音频编码

本示例编码适用PC、Android、IOS(仅Safari)中应用,假如用RecordApp可提升对IOS(手机微信访问器、小程序流程)的适用。

看万遍编码比不上行動1遍,新建1个html文档,把下面3段编码拷贝到文档内,双击鼠标访问器开启就可以开展检测。
 

<!-- 先载入js音频库,留意:你应当把js clone到当地应用 --><meta charset="utf⑻" />
<script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>

<input type="button" onclick="startRec()" value="刚开始音频">
<hr>
<input type="button" onclick="playRec()" value="完毕并播发">
<input type="button" onclick="uploadRec()" value="完毕并提交">

<script>
var rec;
function startRec(){
    rec=Recorder();//应用默认设置配备,mp3文件格式
    
    //开启话筒受权得到有关資源
    rec.open(function(){
        //刚开始音频
        rec.start();
    },function(msg,isUserNotAllow){
        //客户回绝了管理权限或访问器不适用
        alert((isUserNotAllow?"客户回绝了管理权限,":"")+"没法音频:"+msg);
    });
};
</script>

提交服务器编码

<script>
function uploadRec(){
    //终止音频,获得了音频文档blob2进制目标,想干吗就干吗
    rec.stop(function(blob,duration){
        /*
        blob文档目标,能够用FileReader载入出內容
        ,或用FormData提交,本例立即提交2进制文档
        ,针对一般application/x-www-form-urlencoded表单提交
        ,请参照github里边的事例
        */
        var form=new FormData();
        form.append("upfile",blob,"recorder.mp3"); //和一般form表单并没有2致,后端开发接受到upfile主要参数的文档,文档名为recorder.mp3
        
        //立即用ajax提交
        var xhr=new XMLHttpRequest();
        xhr.open("POST","http://baidu.com/改动成你的提交详细地址");//这个假详细地址在操纵台network中能看到恳求数据信息和文件格式,恳求結果不相干紧要
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                alert(xhr.status==200?"提交取得成功":"检测请先开启访问器操纵台,随后再次音频,在network选项卡里边就可以看到提交恳求数据信息和文件格式了");
            }
        }
        xhr.send(form);
    },function(msg){
        alert("音频不成功:"+msg);
    });
};</script>

马上播发编码

<script>
function playRec(){
    //终止音频,获得了音频文档blob2进制目标,想干吗就干吗
    rec.stop(function(blob,duration){
        var audio=document.createElement("audio");
        audio.controls=true;
        document.body.appendChild(audio);
        
        //十分简易的就可以拿到blob声频url
        audio.src=URL.createObjectURL(blob);
        audio.play();
    },function(msg){
        alert("音频不成功:"+msg);
    });
};</script>

--------------------------------------------------------------------------------

Recorder

GitHub详细地址:https://github.com/xiangyuecn/Recorder

线上检测: 点此检测

Recorder用于html5音频,为1个纯碎的js库,适用绝大多数已完成getUserMedia的挪动端、PC端访问器,包含腾迅Android X5核心(QQ、手机微信)。

音频默认设置輸出mp3文件格式,此外可选wav文件格式(此文件格式音频文档超大);比较有限适用ogg、webm、amr文件格式;适用随意文件格式拓展(前提条件有相应编号器)。

精巧:假如对音频文档尺寸沒有非常规定,能够仅仅应用音频关键+wav编号器,源代码不够300行,缩小后的recorder.wav.min.js不够4kb。mp3应用lamejs编号,缩小后的recorder.mp3.min.js打开gzip后54kb。

因为IOS(11.X、12.X)上仅有Safari适用getUserMedia,别的访问器均不适用H5音频,因而附加对于IOS对Recorder开展了进1步的适配封裝,升級变成RecordApp,用于适用手机微信(含访问器、小程序流程web-view),此外RecordApp对Hybrid App也出示了更为出色的适用。

因为RecordApp必须手机微信群众(定阅)号出示JsSDK音频适用,因此开发设计难度会大些,但适用的自然环境更多。Recorder拿来就可以用,实际应用哪一个请参照下表:

适用 Recorder RecordApp PC访问器 √ √ Android访问器 √ √ Android手机微信(含小程序流程) √ √ Android Hybrid App √ √ IOS Safari √ √ IOS手机微信(含小程序流程)   √ IOS Hybrid App   √ IOS别的访问器     开发设计难度 简易 繁杂 第3方依靠 无 依靠手机微信群众号

* 可到github中查阅RecordApp源代码,在文件目录xiangyuecn/Recorder/app-support-sample中。

以上所述是网编给大伙儿详细介绍的HTML5网页页面音频和提交到服务器适用PC、Android,适用IOS手机微信作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!