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.mp3
			form.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实现代码：

<?php
 
	header("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);
  
?>

a_靖博客专家

发布了411 篇原创文章 · 获赞 809 · 访问量 199万+

他的留言板关注

HTML发送语音，上传音频PHP接收

猜你喜欢