HTML5 实现录音，然后上传ios上传录音到服务器器，有现成方案吗

来源：蜘蛛抓取(WebSpider) 时间：2017-05-18 08:12 标签： 还没有连接录音服务器
如何实现web在线录音并保存到数据库？
如何实现web在线录音并保存到数据库？
（能否非插件）&&&不知道HTML5能否实现呢？
至今没有听说过HTML5支持录音....用Flash或者其他你认为可以的插件把
web多媒体还是用flash吧，html5估计有你蛋疼的。
试试看red5那一套 原先做过一个项目的 可以自动保存录音 一个web网站，集成了在线点对点视频功能客服咨询功能 就是可以自动保存录音和视频的。网址多少来着的？我想想看 好久了 看看是不是这个 还是http://www.xdsb.net?提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
HTML5裁剪图片并上传至服务器实现原理讲解
导读：经常做项目需要本地上传图片裁剪并上传服务器，比如会议头像等功能，但以前实现这类需求都很复杂，往往需要先把图片上传到服务器，然后返回...
经常做项目需要本地上传图片裁剪并上传服务器，比如会议头像等功能，但以前实现这类需求都很复杂，往往需要先把图片上传到服务器，然后返回给用户，让用户确定裁剪坐标，发送给服务器，服务器裁剪完再返回给用户，来回需要 5 步。步骤繁琐不说，当很多用户上传图片的时候也很影响服务器性能。
HTML5 支持从&input[type=file]&元素中直接获取文件信息，也可以读取文件内容。我们用下面代码就可以实现：
$('input[type=file]').change(function(){
var file=this.files[0];
这一步就需要用到&FileReader&了，这个类是专门用来读取本地文件的。纯文本或者二进制都可以读取，但是本地文件必须是经过用户允许才能读取，也就是说用户要在input[type=file]中选择了这个文件，你才能读取到它。
通过&FileReader&我们可以将图片文件转化成&DataURL，就是以&data:image/base64,&开头的一种URL,然后可以直接放在&image.src&里，这样本地图片就显示出来了。
$('input[type=file]').change(function(){
var file=this.files[0];
var reader=new FileReader();
reader.onload=function(){
var url=reader.
setImageURL(url);
reader.readAsDataURL(file);
var image=new Image();
function setImageURL(url){
image.src=
Image&就是在&html&里的&&img&&标签，所以可以直接插入到文档流里。
这一步没啥好说的，实现的方法也很多，需要获得下面四个裁剪框的坐标：
如下图所示：
这是时候我们就需要用到&canvas&了，canvas&和图片一样，所以新建&canvas&时就要确定其高宽。这里我们还运用到image.naturalHeight&和&image.naturalWidth&这两个属性来获取图片原始尺寸。
将图片放置入&canvas&时需要调用&drawImage&，这个接口参数比较多，在&&上有详细的说明。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
因为我们用&canvas&只是用于裁剪图片的，所以需要新建一个&canvas&让它的尺寸和裁剪之后图片的尺寸相等，此时canvas&就相当与我们的裁剪框。运用这个函数还可以将大图缩放成小图，同学们自己研究吧。
var canvas=$('&canvas width=&'+width+'& height=&'+height+'&&&/canvas&')[0],
ctx=canvas.getContext('2d');
ctx.drawImage(image,x,y,width,height,0,0,width,height);
$(document.body).append(canvas);
将&canvas&加入文档流之后，就可以看到裁剪后的效果了。不过我们还需要将图片上传至服务器里。
这时我们要获取&canvas&中图片的信息，用&toDataURL&就可以转换成上面用到的&DataURL&。 然后取出其中 base64 信息，再用&window.atob&转换成由二进制字符串。但&window.atob&转换后的结果仍然是字符串，直接给&Blob&还是会出错。所以又要用&Uint8Array&转换一下。总之这里挺麻烦的。。
var data=canvas.toDataURL();
data=data.split(',')[1];
data=window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i & data. i++) {
ia[i] = data.charCodeAt(i);
var blob=new Blob([ia], {type:&image/png&});
这时候裁剪后的文件就储存在&blob&里了,我们可以把它当作是普通文件一样，加入到&FormData&里，并上传至服务器了。
FormData&顾名思义，就是用来创建表单数据的，用&append&以键值的形式将数据加入进去即可。但他最大的特点就是可以手工添加文件或者&Blob&类型的数据，Blob&数据也会被当作文件来处理。原生 js 可以直接传递给&xhr.send(fd)， jquery 可以放入&data&里请求。
var fd=new FormData();
fd.append('file',blob);
type:&POST&,
success:function(){}
然后你服务器里应该就可以收到这个文件了~
转载请注明（B5教程网）原文链接：
网友评论：&>&&>&&>&&>&html5通过getUserMedia API实现网页录音
html5通过getUserMedia API实现网页录音
上传大小：3KB
html5通过getUserMedia API实现网页录音，已经在服务器实践成功，能立即播放，最好是在chrome21以上实现，本人在chrome31以上实现的。从外国网站下载过来的原DEMO.
综合评分：4（61位用户评分）
所需积分：10
下载次数：419
审核通过送C币
创建者：nliuwenpeng
创建者：qq_
课程推荐相关知识库
上传者其他资源上传者专辑
移动开发热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
html5通过getUserMedia API实现网页录音
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：

我要回帖

更多关于 还没有连接录音服务器 的文章

 

随机推荐