整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。
本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器，前几天升了一下级，以后有时间再专门写一篇记录。
本示例代码支持PC、Android、IOS(仅Safari)中使用，如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。
看万遍代码不如行动一遍，新建一个html文件，把下面三段代码复制到文件内，双击浏览器打开就能进行测试。
<!-- 先加载js录音库，注意：你应该把js clone到本地使用 --><meta charset="utf-8" />
<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(){
//停止录音，得到了录音文件blob二进制对象，想干嘛就干嘛
rec.stop(function(blob,duration){
/*
blob文件对象，可以用FileReader读取出内容
，或者用FormData上传，本例直接上传二进制文件
，对于普通application/x-www-form-urlencoded表单上传
，请参考github里面的例子
*/
var form=new FormData();
form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到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(){
//停止录音，得到了录音文件blob二进制对象，想干嘛就干嘛
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>
GitHub地址：https://github.com/xiangyuecn/Recorder
在线测试: https://xiangyuecn.github.io/Recorder/
Recorder用于html5录音，为一个纯粹的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进行了进一步的兼容封装，升级成了RecordApp，用于支持微信（含浏览器、小程序web-view），另外RecordApp对Hybrid App也提供了更加优秀的支持。
由于RecordApp需要微信公众(订阅)号提供JsSDK录音支持，所以开发难度会大些，但支持的环境更多。Recorder拿来就能用，具体使用哪个请参考下表：
如果这个库有帮助到您，请 Star 一下。
原文作者：高坚果兄弟
原文地址：https://www.cnblogs.com/xiangyuecn/p/10772227.html
在很多网站上都会使用到视频和音频，HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签，而嵌入音频可以使用 <audio> 标签。这两个标签都是 HTML 5 中新增的标签，两个标签中的属性和方法也很类似，但也有些不同。其中 audio 元素用于定义声音，比如音乐， video 元素用于定义视频，如电影等。
<video> 标签可以用于定义视频，且提供了播放、暂停、音量控件来控制视频。举个例子，像我们侠课岛网站上，课程视频播放，就是通过 <video> 标签来实现的。下面我们来看一下如何向网页中嵌入一个视频。
示例：
首先我们准备一个视频，例如一个 test.mp4，然后使用 <video> 标签嵌入视频，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<video src="./test.mp4" controls="controls" width="700px" height="400px"></video>
</body>
</html>
在浏览器中的预览效果：
从上图中可以看到，我们通过 <video> 标签成功向网页中插入了一个视频， 其中 src 属性用于引入要播放的视频的 URL，注意视频地址一定要正确，如果地址错误，视频是不能显示的。然后我们通过 width、height 属性设置了视频的宽度为 700px ，高度为 400px。
然后可以看到，视频上还显示了播放、调整音量等控件，当我们点击播放按钮时，视频就会开始播放。这是因为我们设置了 controls 属性，如果我们没有设置这个属性，视频将会显示一个静止的画面，并且不管怎么点击都是没有反应的。大家可以试一下，不设置 controls 属性然后在浏览器中查看演示效果，这里就不演示给大家看了。
video 元素中的常用属性如下所示：
有些比较老的浏览器可能不支持 <video> 标签，例如 IE8 及以下的浏览器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等浏览器都支持 <video> 标签。
所以我们可以在 <video> 标签中放置文本内容，这样当某个浏览器不支持此标签时，就可以显示提示内容：
<video src="./test.mp4" controls="controls" width="700px" height="400px">
您的浏览器不支持 video 标签
</video>
这样用户就会知道，是因为浏览器不支持所以加载视频不成功，可以换一个浏览器。
像我们平时看到的视频格式有很多种，例如常见的有 mp4、AVI、mov、rmvb、Ogg 等等， 目前 video 元素支持的视频格式有下面三种：
这三种视频格式，在不同的浏览器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 浏览器，Ogg 格式不支持IE、Safari 浏览器，WebM 格式不支持IE、Safari 浏览器等。
所以我们可能需要在不同的浏览器中使用不同的视频格式，这需要用到 <source> 标签。
<source> 标签可以为媒体元素定义媒介资源，例如 video 和 audio 元素。
例如 <video> 标签中可以包含多个 <source> 标签，<source> 标签可以链接不同的视频文件，浏览器将使用第一个可识别的格式。
示例：
例如我们插入的视频播放器，带有两个源文件，浏览器会根据需要来选择源文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<video controls="controls" width="700px" height="400px">
<source src="./test.mp4" type="video/mp4">
<source src="./test.ogg" type="video/ogg">
您的浏览器不支持 video 标签
</video>
</body>
</html>
像上述代码中，如果是 Safari 浏览器就会选择第一个源文件，如果是 Firefox 浏览器则会选择第二个源文件。
<source> 标签有三个属性：
向网页中嵌入音频可以使用 <audio> 标签，此标签的使用和 <video> 标签类似。插入视频是有画面的，我们也可以调整视频的宽和高等，而插入音频是没有画面的。
audio 元素支持的格式和 video 元素也有一点区别：
示例：
例如我们插入一段音频，在浏览器中可以看到，是没有画面的，只有声音：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<audio controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签
</audio>
</body>
</html>
在浏览器中的演示效果：
向网页中嵌入音频时，也可以通过 <source> 标签来指定两个源文件，<source> 标签允许规定两个视频或者音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
audio 元素中的常用属性和 video 元素差不多，但是 audio 元素中没有 width、height 等属性。
常用属性如下所示：
向网页中嵌入视频和音频其实很简单，要注意 video 元素 和 audio 元素支持的视频、音频格式类型，如果插入的视频格式不支持，则视频或音频不会显示。
更多可以查看链接：https://www.9xkd.com/
音频是网页承载内容很重要的一个元素，也是必不可少的网页表现形式（图、文、表、视、音）之一。缺少声音的网站，就如同人不能说话一样。曾经网页要想播放音频，必须得用第三方插件flash。随着html5标准逐渐普及，如今几乎所有的浏览器都使用html5来播放音频。
目标
作用是在 HTML 页面中嵌入音频元素，来播放声音文件或者音频流。
网页版的音乐播放器
src 音频的播放源（必须）
controls 浏览器自带的控制条（必须）
autoplay 自动播放
loop 循环播放
preload 预加载
音频代码
每一种浏览器自带的音频播放控制器都不一样，但功能都一样。网上看到的播放器，大多数都是改过它的样式。
浏览器自带的音频控制条
<audio> 元素支持三种视频格式： MP4, WebM, 和 Ogg。
如果不确定音频格式是哪个格式，可以使用source标签。<source> 元素可以链接不同格式的视频文件，浏览器将使用第一个可识别的格式。
支持多种格式
audio总结
*请认真填写需求信息，我们会在24小时内与您取得联系。
