HTML发送语音，上传音频PHP接收
实现需求：网页录制音频上传给后端接收，接收后PHP把文件的名字存到数据库的表里面，这里我的后端用的是PHP，并且把代码贴出来了。
前端实现代码：
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="shortcut icon" type="image/png" href="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/assets/icon.png"><title>Recorder</title><script type="text/javascript" src="js/jquery.1.11.js?v=231583415054"></script><script src="https://cdn.jsdelivr.net/gh/xiangyuecn/Recorder@latest/recorder.mp3.min.js"></script></head><body><script>var TestApi='http://localhost/audio/up.php';//用来在控制台network中能看到请求数据，测试的请求结果无关紧要var rec=Recorder();rec.open(function(){rec.start();setTimeout(function(){rec.stop(function(blob,duration){//-----↓↓↓以下才是主要代码↓↓↓-------// https://github.com/xiangyuecn/Recorder//本例子假设使用jQuery封装的请求方式，实际使用中自行调整为自己的请求方式//录音结束时拿到了blob文件对象，可以用FileReader读取出内容，或者用FormData上传var api=TestApi;/***方式二：使用FormData用multipart/form-data表单上传文件***/var form=new FormData();form.append("file",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3form.append("id","1"); //...其他表单参数$.ajax({url:api //上传接口地址,type:"POST",contentType:false //让xhr自动处理Content-Type header，multipart/form-data需要生成随机的boundary,processData:false //不要处理data，让xhr自动处理,data:form,success:function(v){console.log("上传成功",v);},error:function(s){console.error("上传失败",s);}});//-----↑↑↑以上才是主要代码↑↑↑-------},function(msg){console.log("录音失败:"+msg);});},1000);},function(msg){console.log("无法录音:"+msg);});</script></body>
</html>
php实现代码：
<?phpheader("Content-Type:multipart/form-data;charset=utf8"); header("Access-Control-Allow-Origin: *"); //解决跨域header('Access-Control-Allow-Methods:POST');// 响应类型 mysql_query("SET NAMES utf8");//解决中文乱码问题$con = mysql_connect("localhost","root","root");mysql_select_db("demo", $con); //选择数据库$name=$_FILES['file']['name']; echo $_POST[id]. $name;$result = @mysql_query($strsql);$sql = "insert into audio (a_id,a_name) values('$_POST[id]','$name')";if (!mysql_query($sql,$con)){die('Error: ' . mysql_error());}move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]); echo "upload/" . $_FILES["file"]["name"];mysql_close($con);?> 相关文章：
html:漂亮的原生表格_HTML表格：关于它们的所有知识
html:漂亮的原生表格by Alexander Gilmanov亚历山大吉尔马诺夫(Alexander Gilmanov) HTML表格：关于它们的所有知识 (HTML Tables: All there is to know about them) Judging by the fact that we created wpDataTables, it’s no secret that we like tables. So …
[BZOJ] 1606: [Usaco2008 Dec]Hay For Sale 购买干草
1606: [Usaco2008 Dec]Hay For Sale 购买干草 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1335 Solved: 989[Submit][Status][Discuss]Description 约翰遭受了重大的损失：蟑螂吃掉了他所有的干草，留下一群饥饿的牛．他乘着容量为C(1≤C≤…
PHP TP5框架 安装运行 Warning: require(E:\phpstudy_pro\WWW\TP5\tp5\public/../thinkphp/base.php): failed to
创建一个新的项目：进入项目的根目录执行 git 命令： 先执行 git clone -b 5.1 https://git.coding.net/liu21st/thinkphp5.git tp5 进入 tp5目录 cd tp5再执行 git clone -b 5.1 https://git.coding.net/liu21st/framework.git thinkphp 执行更新框…
python之模块base64
# -*- coding: cp936 -*- #python 27 #xiaodeng>>> help(base64) #用来作base64编码解码 FUNCTIONS #函数(功能) •b16decode(s, casefoldFalse)Decode a Base16 encoded string. #解码 decode_stringbase64…
github pages_使用GitHub Pages和Lighthouse增强您的开发人员产品组合
github pagesFor someone who is trying to break into software development, it doesn’t matter where you look — LinkedIn, career advice boards, youtube tutorials — the advice is always the same: you need a portfolio. freeCodeCamp knows this advise, and the…
Angular 4+ HttpClient
个人博客迁移至 http://www.sulishibaobei.com 处； 这篇，算是上一篇Angular 4 Http的后续； Angular 4.3.0-rc.0 版本已经发布?。在这个版本中，我们等到了一个令人兴奋的新功能 - HTTPClient API 的改进版本； HttpCli…
PHP TP5入门 二：写接口，添加控制器并访问
默认访问地址：http://localhost/TP5/tp5/public/index.php/index/hello_world 实现代码： <?php namespace app\index\controller;class HelloWorld {public function index(){return 22hello，world！;} } 添加一个控制器如…
Possion 分布
泊松分布的概率函数为： \[P(Xk)\frac{\lambda^k}{k!}e^{-\lambda},k0,1,2,\cdots\] 如果 $X_i \sim P(\lambda_i)$,并且 互相独立，那么: \[Y\left( \sum\limits_{i1}^n{X_i} \right) \sim P \left( \sum\limits_{i1}^n{\lambda_i} \right)\] 从上面公式…
如何使您的Kotlin Android动画可访问
When researching examples for a first ever Android contribution, few examples existed for animations written in Kotlin. There were also few code examples of accessibility considerations within native animations.在研究有史以来第一个Android贡献的示例时&#…
指针空间的申请与释放
一、malloc()和free()的基本概念以及基本用法： 1、函数原型及说明： void *malloc(long NumBytes)：该函数分配了NumBytes个字节，并返回了指向这块内存的指针。如果分配失败，则返回一个空指针（NULL࿰…
UIGraphicsBeginImageContext - 位图上下文
UIGraphicsBeginImageContext 首先，先来认识一个UIGraphicsBeginImageContext，它会创建一个基于位图的上下文(context)（默认创建一个透明的位图上下文）,并将其设置为当前上下文。 位图图形上下文UIKit是不会负责创建的，…
小程序双击事件
代码： <button data-time"{{lastTapTime}}" data-title"标题" bindtap"doubleClick">双击</button> js data: {lastTapTime:0,}, doubleClick: function (e) {var curTime e.timeStampvar lastTime e.currentTarget…
快速了解Kubernetes微服务中的通信
by Adam Henson亚当汉森(Adam Henson) 快速了解Kubernetes微服务中的通信 (A quick look at communication in Kubernetes microservices) “服务”概念和一个Node.js示例 (The “service” concept and a Node.js example) Based on complexity, a layer of microservices ca…
连接 linux服务器
操作步骤： xshell 下载 https://xshell.en.softonic.com/ 点击下载后，会有邮箱验证，点击验证通过就会自动下载，然后安装就行。 打开工具，点击新建会话 然后 浏览文件后直接点击确认，出来这样就登录成功了…
【bzoj3924】[Zjoi2015]幻想乡战略游戏 动态点分治
题目描述 傲娇少女幽香正在玩一个非常有趣的战略类游戏，本来这个游戏的地图其实还不算太大，幽香还能管得过来，但是不知道为什么现在的网游厂商把游戏的地图越做越大，以至于幽香一眼根本看不过来，更别说和别人打仗了。 …
面试题05-UI控件
怎么解决缓存池满的问题(cell)ios中不存在缓存池满的情况，因为通常我们ios中开发，对象都是在需要的时候才会创建，有种常用的说话叫做懒加载，还有在UITableView中一般只会创建刚开始出现在屏幕中的cell，之后都是从缓存池…
全球链界科技发展大会_如何成为科技界的团队合作者
全球链界科技发展大会by Ofer Vugman由Ofer Vugman 如何成为科技界的团队合作者 (How to be a team player in the tech world) 这些技巧将增进您的关系并提高团队的工作效率 (These tips will boost your relationships and your team’s efficiency at work) When I landed …
linux驱动之i2c子系统mpu6050设备驱动
以下是mpu6050简单的驱动实现，mpu6050是I2C接口的6轴传感器，可以作为字符设备注册到内核，本代码运行环境是3.4.2内核，4.3.2版本的编译链，12.04版本的Ubuntu，硬件环境是jz2440开发板； 按照之前分…
小程序使用富文本完整代码及示例图
先看示例图： 富文本html代码： 效果图： 实现步骤： 1.下载 wxParse代码放到你的小程序项目目录里面 https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/-wxParse.js(必须存在)-html2json.js(必须存在…
C# 百分比的获取
这里介绍 C# 百分比转换有2种方式 例： double a50; double b100; a/b.ToString("0.00%"); 或 a/b.ToString("P3"); p后的数字表示能显示小数点后几位的精度数 实际如： 方法一：a/b.ToString("0.00%"); 方法二&a…
css 网格布局_我从CSS网格布局中学到的东西
css 网格布局by Jennifer Wjertzoch珍妮弗维佐奇 我从CSS网格布局中学到的东西 (Things I’ve learned about CSS grid layout) With CSS Grid you can create complex web designs. It is very intuitive and very well supported by the major browsers. In this article I …
GoF23种设计模式之行为型模式之解释器模式
一、概述 给定一种语言和其文法的一种表示，再定义一个解释器，该解释器使用表示来解释语言中的句子。 二、适用性 当需要解释一种语言，并且可以将该语言中的句子表示为一个抽象语法树的时候。 1.该文法简单对于复杂的文法&…
U盘安装Ubuntu14.4时遇到分区问题记录
1、在安装Ubuntu14.4时，遇到如果先分出 / 跟挂载的主分区时，后面只能再分一个swap，或者挂载一个/home，或者一个/ boot 时不能继续分区，当然想安装也是不能不能成功的。 解决办法：在这里先不要创建 / 的主挂…
请求异步js,请求完成后执行代码
要确定请求完成 js 文件，才执行相关的代码。 场景，引用了百度地图的 js-sdk， 需要实例化 SDK 对象，但是这个引用加载JS-SDK文件其实是异步的，在没请求完成之前就实例化对象就会报错，提示找不到该对象。 解…
测试驱动开发 测试前移_测试驱动开发简介
测试驱动开发 测试前移I’ve been programming for five years and, honestly, I have avoided test-driven development. I haven’t avoided it because I didn’t think it was important. In fact, it seemed very important–but rather because I was too comfortable no…
BZOJ 2957楼房重建
传送门 线段树 //Twenty #include<cstdio> #include<cstdlib> #include<iostream> #include<algorithm> #include<cmath> #include<cstring> #include<queue> #include<vector> #define lc x<<1 #define rc x<<1|…
AngularJs $cacheFactory 缓存服务
可能之前的api写的有些枯燥吧，因为不烧脑，不需要很多逻辑思维来做处理，那么之后的文章会有趣很多，慢慢的开始烧脑了，准备好大量脑细胞的死亡吧~ 先来篇简单的缓存服务。 本文将api文档里的$cacheFactory和 $cacheFac…
H5使用百度地图SDK获取用户当前位置并且标记显示在地图
代码实现功能： H5使用百度地图SDK获取用户当前位置并且标记显示在地图，点击该标记弹出一层自定义的HTML。 效果图： 代码： <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" conten…
clojurescript_为什么ClojureScript在NPM上如此出色
clojurescriptby Jacek Schae由Jacek Schae 为什么ClojureScript在NPM上如此出色 (Why ClojureScript works so well with NPM) Every language that complies/transpiles to JavaScript wants to connect to npm to use this huge ecosystem. The master of this is, of cour…
微信网页开发 jssdk前后端代码，PHP实现完整代码,自定义分享
如果你页面启用了https，务必引入 https😕/res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK 微信网页JS-SDK的功能实现，后端php，完整源码。分享内容自定义。 jsapi_ticket &…