自动录制并允许使用JQuery播放一次 [英] Auto record and allow to play once using JQuery
本文介绍了自动录制并允许使用JQuery播放一次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hiii Everyone，
以下是记录的示例代码。
< html>
< body>
< audio controls autoplay>< / audio>
< input onclick =startRecording（）type =buttonvalue =start recording/>
< input onclick =stopRecording（）type =buttonvalue =停止录制和播放/>
< script>
var onFail = function（e）{
console.log（'Rejected！'，e）;
};
var onSuccess = function（s）{
stream = s;
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var stream;
var audio = document.querySelector（'audio'）;
函数startRecording（）{
if（navigator.getUserMedia）{
navigator.getUserMedia（{audio：true}，onSuccess，onFail）;
} else {
console.log（'navigator.getUserMedia not present'）;
}
}
函数stopRecording（）{
audio.src = window.URL.createObjectURL（stream）;
}
< / script>
< / body>
< / html>
我想要做的是setInterval 40秒，它将缓冲40秒，就像录制将开始于40秒计时器将在40秒后运行它将显示播放按钮以检查录制的音频。我已经添加了示例屏幕截图
进度条将显示录制内容。 。同样会有一些音频问题我需要开始录音一旦音频完整播放。如果有人知道这个问题的解决方案请帮助我。谢谢你的支持
解决方案
< html>
< head>
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js>< / script>
< style>
.center_div {
宽度：500px;
身高：100px;
background-color：＃f5f5f5;
border：1px solid＃808080;
仓位：绝对;
top：50％;剩余
：50％;
margin-left：-250px;
/ *半宽* /
margin-top：-50px;
/ *半高* /
填充：25px;
}
.recording_label {
display：block;
text-align：center;
填充：10px;
font-family：sans-serif;
font-size：1.1em;
保证金底部：25px;
}
.loader_bg {
min-width：100％;
背景：＃c5c5c5;
min-height：20px;
display：block;
}
.loader_bg1 {
min-width：90％;
背景：灰色;
min-height：20px;
display：inline-block;
头寸：相对;
顶部：-20px;
}
< / style>
< / head>
< body>
< audio controls autoplay>< / audio>
< input onclick =startRecording（）; type =buttonvalue =开始录制/>
< input onclick =stopRecording（）; type =buttonvalue =停止录制和播放/>
< div class =center_div>
< span class =recording_label>请稍候......< / span>
< span class =loader_bg>< / span>
< span class =loader_bg1>< / span>
< / div>
< script>
var onFail = function（e）{
console.log（'Rejected！'，e）;
};
var onSuccess = function（s）{
stream = s;
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var stream;
var audio = document.querySelector（'audio'）;
函数startRecording（）{
if（navigator.getUserMedia）{
navigator.getUserMedia（{
audio：true
}，onSuccess，onFail） ;
} else {
console.log（'navigator.getUserMedia not present'）;
}
}
函数stopRecording（）{
audio.src = window.URL.createObjectURL（stream）;
}
$（function（）{
var max = 40;
var count = max + 1;
var counter = setInterval（timer， 1000）;
函数计时器（）{
count = count - 1;
if（count< = 0）{
clearInterval（counter）;
$（。recording_label）。html（Recording ...）;
$（'。loader_bg1'）。css（{
'min-width'：''+（100 ）+'％'
}）
startRecording（）;
recordingSec（40）;
return;
}
$（。recording_label） .html（录制将以+ count +sec。开始）;
var percent =（count / max）* 100;
$（'。loader_bg1'）。css（{
'min-width'：''+（100 - ％）+'％'
}）
}
}）;
函数recordingSec（秒）{
var count = sec + 1;
var counter = setInterval（timer，1000）;
函数计时器（）{
count = count - 1;
if（count< = 0）{
clearInterval（counter）;
$（。recording_label）。html（录制停止...播放）;
$（'。loader_bg1'）。css（{
'min-width'：''+（100）+'％'
}）
stopRecording（）;
返回;
}
$（。recording_label）。html（录制开始[+（秒 - 计数）+/+秒+]秒。）;
var percent =（count / sec）* 100;
$（'。loader_bg1'）。css（{
'min-width'：''+（100 - ％）+'％'
}）
}
}
< / script>
< / body>
< / html>
Hiii Everyone,
Below is the sample code for record.
<html>
<body>
<audio controls autoplay></audio>
<input onclick="startRecording()" type="button" value="start recording" />
<input onclick="stopRecording()" type="button" value="stop recording and play" />
<script>
var onFail = function(e) {
console.log('Rejected!', e);
};
var onSuccess = function(s) {
stream = s;
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var stream;
var audio = document.querySelector('audio');
function startRecording() {
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true}, onSuccess, onFail);
} else {
console.log('navigator.getUserMedia not present');
}
}
function stopRecording() {
audio.src = window.URL.createObjectURL(stream);
}
</script>
</body>
</html>
What I want to do is setInterval for 40 secs it will buffer for 40 secs like recording will start in 40secs timer will run after 40 secs it will show the play button to check audio recorded.Below I had added sample screenshots
Progress bar will show the recording..Similarly there will be some question with audio there I need to start recording once audio complete play.If anybody knows solution for this issue Please help me.Thanks for ur support
解决方案
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
.center_div {
width: 500px;
height: 100px;
background-color: #f5f5f5;
border: 1px solid #808080;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
/* half width*/
margin-top: -50px;
/* half height*/
padding: 25px;
}
.recording_label {
display: block;
text-align: center;
padding: 10px;
font-family: sans-serif;
font-size: 1.1em;
margin-bottom: 25px;
}
.loader_bg {
min-width: 100%;
background: #c5c5c5;
min-height: 20px;
display: block;
}
.loader_bg1 {
min-width: 90%;
background: grey;
min-height: 20px;
display: inline-block;
position: relative;
top: -20px;
}
</style>
</head>
<body>
<audio controls autoplay></audio>
<input onclick="startRecording();" type="button" value="start recording" />
<input onclick="stopRecording();" type="button" value="stop recording and play" />
<div class="center_div">
<span class="recording_label">Please wait...</span>
<span class="loader_bg"></span>
<span class="loader_bg1"></span>
</div>
<script>
var onFail = function(e) {
console.log('Rejected!', e);
};
var onSuccess = function(s) {
stream = s;
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var stream;
var audio = document.querySelector('audio');
function startRecording() {
if (navigator.getUserMedia) {
navigator.getUserMedia({
audio: true
}, onSuccess, onFail);
} else {
console.log('navigator.getUserMedia not present');
}
}
function stopRecording() {
audio.src = window.URL.createObjectURL(stream);
}
$(function() {
var max = 40;
var count = max + 1;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
$(".recording_label").html("Recording...");
$('.loader_bg1').css({
'min-width': '' + (100) + '%'
})
startRecording();
recordingSec(40);
return;
}
$(".recording_label").html("Recording will begin in " + count + " sec.");
var percent = (count / max) * 100;
$('.loader_bg1').css({
'min-width': '' + (100 - percent) + '%'
})
}
});
function recordingSec(sec) {
var count = sec + 1;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
$(".recording_label").html("Recording stopped...Playing");
$('.loader_bg1').css({
'min-width': '' + (100) + '%'
})
stopRecording();
return;
}
$(".recording_label").html("Recording started [ " + (sec - count) + " / " + sec + " ] sec.");
var percent = (count / sec) * 100;
$('.loader_bg1').css({
'min-width': '' + (100 - percent) + '%'
})
}
}
</script>
</body>
</html>
这篇关于自动录制并允许使用JQuery播放一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
