首页 > 代码库 > HTML5+ 手机端录音和播放录音
HTML5+ 手机端录音和播放录音
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>录音播放</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
body{
width: 100%;
padding: 0;
margin: 0;
}
input{
padding: .2rem;
margin: .5rem auto 0 auto;
font-size: .5rem;
border-radius: .5rem;
display: block;
width: 5rem;
color: red;
background: white;
}
</style>
</head>
<body>
<input type="button" value="返回主页" id="ReturnIndex">
<input type="button" value="点击录音" id="Recorder" />
<input type="button" value="停止录音" id="StopR">
<input type="button" value="播放录音" id="Player" />
<input type="button" value="停止播放" id="StopP" />
</body>
</html>
<script type="text/javascript">
/**
* 页面布局rem重置语句
*/
$(‘html‘).css(‘font-size‘, $(window).width()/10);
/**
* 手机端页面初始化事件, 所有操作均要写在在该事件内
* 否则可能会出现错误: plus is not defind
*/
document.addEventListener(‘plusready‘, function(){
/**
* 获取录音对象 plus.audio.getRecorder()
* 定义录音文件的保存地址
*/
var recorder = plus.audio.getRecorder();
var fileUrl = ‘‘;
/**
* 开始录音 recorder.record(option, 成功回调, 失败回调)
* 结束录音 recorder.stop()
* option: {
* filename: 文件的保存夹
* samplerate: 采样率
* format: 录音保存的文件后缀名
* }
*/
$(‘#Recorder‘).on(‘touchstart‘, function(){
event.preventDefault();
var option = {
filename:"_doc/audio/",
samplerate: ‘8000‘,
format: ‘amr‘
}
recorder.record({}, function(e){
fileUrl = e;
}, function(){
console.log("录音失败");
});
});
$(‘#StopR‘).on(‘touchstart‘, function(){
recorder.stop();
});
/**
* 获取播放录音对象 plus.audio.createPlayer(文件地址)
* 开始播放 player.play(成功回调, 失败回调)
* 停止播放 player.stop()
* >>>>>>>>>>>>>>>>>> player 基本方法 >>>>>>>>>>>>>>>>>
* play(成功回调, 失败回调): 开始播放音频
* pause(): 暂停播放音频
* resume(): 恢复播放音频
* stop(): 停止播放音频
* seekTo(多少秒): 跳到指定位置播放音频
* getDuration(): 获取音频流的总长度
* getPosition(): 获取音频流当前播放的位置
* setRoute(): 设置音频输出线路
*/
$(‘#Player‘).on(‘touchstart‘, function(){
event.preventDefault();
// 获取音频播放对象
var player = plus.audio.createPlayer(fileUrl);
player.play(function(e){
console.log(e);
console.log(fileUrl);
}, function(){
console.log("播放失败");
});
$(‘#StopP‘).on(‘touchstart‘, function(){
player.stop();
});
});
/**
* 返回首页
*/
$(‘#ReturnIndex‘).on(‘touchstart‘, function(){
location.href = ‘Index.html‘;
})
});
</script>
HTML5+ 手机端录音和播放录音
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。