|
|
@ -29,7 +29,7 @@
|
|
|
|
<pre class="status"></pre>
|
|
|
|
<pre class="status"></pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div id="audio">
|
|
|
|
<div id="audio">
|
|
|
|
<div class="record_controls">
|
|
|
|
<div class="record_controls">
|
|
|
|
<a class="record_btn audio_btn" id="record_btn" onclick="record_audio()" href="#"><span class="icon"></span>record</a>
|
|
|
|
<a class="record_btn audio_btn" id="record_btn" onclick="record_audio()" href="#"><span class="icon"></span>record</a>
|
|
|
|
<a class="stop_btn audio_btn" id="stop_btn" onclick="stop_audio()" href="#"><span class="icon"></span>stop</a>
|
|
|
|
<a class="stop_btn audio_btn" id="stop_btn" onclick="stop_audio()" href="#"><span class="icon"></span>stop</a>
|
|
|
@ -38,7 +38,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="audio-player-container"></div>
|
|
|
|
<div id="audio-player-container"></div>
|
|
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<input hidden="true" type="file" name="file" id="uploadedFile" accept="audio/*"><br>
|
|
|
|
<input hidden="true" type="file" name="file" id="uploadedFile" accept="audio/*"><br>
|
|
|
|
|
|
|
|
|
|
|
@ -65,86 +65,71 @@ var audio;
|
|
|
|
var state = "empty";
|
|
|
|
var state = "empty";
|
|
|
|
var audio_context;
|
|
|
|
var audio_context;
|
|
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// webkit shim
|
|
|
|
|
|
|
|
window.AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
|
|
|
|
|
|
navigator.getUserMedia = ( navigator.getUserMedia ||
|
|
|
|
|
|
|
|
navigator.webkitGetUserMedia ||
|
|
|
|
|
|
|
|
navigator.mozGetUserMedia ||
|
|
|
|
|
|
|
|
navigator.msGetUserMedia);
|
|
|
|
|
|
|
|
window.URL = window.URL || window.webkitURL;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var audio_context = new AudioContext;
|
|
|
|
|
|
|
|
console.log('Audio context set up.');
|
|
|
|
|
|
|
|
console.log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
alert('No web audio support in this browser!');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function record_audio(){
|
|
|
|
function record_audio(){
|
|
|
|
// if(state == "empty"){
|
|
|
|
if(state == "empty"){
|
|
|
|
// navigator.mediaDevices.getUserMedia({ audio: true })
|
|
|
|
navigator.mediaDevices.getUserMedia({ audio: true })
|
|
|
|
// .then(stream => {
|
|
|
|
.then(stream => {
|
|
|
|
// mediaRecorder = new MediaRecorder(stream);
|
|
|
|
mediaRecorder = new MediaRecorder(stream);
|
|
|
|
// mediaRecorder.start();
|
|
|
|
mediaRecorder.start();
|
|
|
|
|
|
|
|
|
|
|
|
// state = "recording";
|
|
|
|
state = "recording";
|
|
|
|
// document.getElementById('stop_btn').style.display = 'block'
|
|
|
|
document.getElementById('stop_btn').style.display = 'block'
|
|
|
|
|
|
|
|
|
|
|
|
// seconds_int = setInterval(
|
|
|
|
seconds_int = setInterval(
|
|
|
|
// function () {
|
|
|
|
function () {
|
|
|
|
// document.getElementById("record_btn").innerHTML = seconds_rec + " s";
|
|
|
|
document.getElementById("record_btn").innerHTML = seconds_rec + " s";
|
|
|
|
// seconds_rec += 1;
|
|
|
|
seconds_rec += 1;
|
|
|
|
// }, 1000);
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
|
|
// const audioChunks = [];
|
|
|
|
const audioChunks = [];
|
|
|
|
// mediaRecorder.addEventListener("dataavailable", event => {
|
|
|
|
mediaRecorder.addEventListener("dataavailable", event => {
|
|
|
|
// audioChunks.push(event.data);
|
|
|
|
audioChunks.push(event.data);
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// mediaRecorder.addEventListener("stop", () => {
|
|
|
|
mediaRecorder.addEventListener("stop", () => {
|
|
|
|
// // console.log("stopping");
|
|
|
|
console.log("stopping");
|
|
|
|
// // const audioBlob = new Blob(audioChunks, {type: 'audio/ogg; codecs=opus'});
|
|
|
|
const audioBlob = new Blob(audioChunks, {type: 'audio/mpeg'});
|
|
|
|
// // const audioUrl = URL.createObjectURL(audioBlob);
|
|
|
|
const audioUrl = URL.createObjectURL(audioBlob);
|
|
|
|
// // var sound = document.createElement('audio');
|
|
|
|
var sound = document.createElement('audio');
|
|
|
|
// // sound.id = 'audio-player';
|
|
|
|
sound.id = 'audio-player';
|
|
|
|
// // sound.controls = 'controls';
|
|
|
|
sound.controls = 'controls';
|
|
|
|
// // sound.src = audioUrl;
|
|
|
|
sound.src = audioUrl;
|
|
|
|
// // console.log(audioUrl)
|
|
|
|
console.log(audioUrl)
|
|
|
|
// // sound.type = 'audio/ogg; codecs=opus';
|
|
|
|
sound.type = 'audio/mpeg';
|
|
|
|
// // document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
|
|
|
|
document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
|
|
|
|
|
|
|
|
|
|
|
|
// //audio.play();
|
|
|
|
|
|
|
|
// let file = new File(audioChunks, "audio.ogg",{type:"audio/ogg; codecs=opus"});
|
|
|
|
let file = new File([audioBlob], "audio.ogg",{type:"audio/mpeg"});
|
|
|
|
// let container = new DataTransfer();
|
|
|
|
let container = new DataTransfer();
|
|
|
|
// container.items.add(file);
|
|
|
|
container.items.add(file);
|
|
|
|
// document.getElementById("uploadedFile").files = container.files;
|
|
|
|
document.getElementById("uploadedFile").files = container.files;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// audio = new Audio(audioUrl);
|
|
|
|
audio = new Audio(audioUrl);
|
|
|
|
// audio.addEventListener("ended", function(){
|
|
|
|
audio.addEventListener("ended", function(){
|
|
|
|
// audio.currentTime = 0;
|
|
|
|
audio.currentTime = 0;
|
|
|
|
// document.getElementById("play_btn").innerHTML = '<span class="icon_p"></span>play'
|
|
|
|
document.getElementById("play_btn").innerHTML = '<span class="icon_p"></span>play'
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
// audio.addEventListener("timeupdate", function() {
|
|
|
|
audio.addEventListener("timeupdate", function() {
|
|
|
|
// var currentTime = audio.currentTime;
|
|
|
|
var currentTime = audio.currentTime;
|
|
|
|
// var duration = audio.duration;
|
|
|
|
var duration = audio.duration;
|
|
|
|
// $('.progress_bar').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},0,'linear');
|
|
|
|
$('.progress_bar').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},0,'linear');
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// document.getElementById('play_btn').style.display = 'block'
|
|
|
|
document.getElementById('play_btn').style.display = 'block'
|
|
|
|
// document.getElementById('redo_btn').style.display = 'block'
|
|
|
|
document.getElementById('redo_btn').style.display = 'block'
|
|
|
|
// document.getElementById('stop_btn').style.display = 'none'
|
|
|
|
document.getElementById('stop_btn').style.display = 'none'
|
|
|
|
// document.getElementById("record_btn").innerHTML = "recording…";
|
|
|
|
document.getElementById("record_btn").innerHTML = "recording…";
|
|
|
|
// document.getElementById('record_btn').style.display = 'none'
|
|
|
|
document.getElementById('record_btn').style.display = 'none'
|
|
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
// stop_audio()
|
|
|
|
stop_audio()
|
|
|
|
// }, 1000 * 60);
|
|
|
|
}, 1000 * 60);
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function stop_audio(){
|
|
|
|
function stop_audio(){
|
|
|
@ -176,67 +161,6 @@ function play_audio(){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('.recorder .start').on('click', function() {
|
|
|
|
|
|
|
|
$this = $(this);
|
|
|
|
|
|
|
|
$recorder = $this.parent();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
navigator.getUserMedia({audio: true}, function(stream) {
|
|
|
|
|
|
|
|
var recorderObject = new MP3Recorder(audio_context, stream, { statusContainer: $recorder.find('.status'), statusMethod: 'replace' });
|
|
|
|
|
|
|
|
$recorder.data('recorderObject', recorderObject);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
recorderObject.start();
|
|
|
|
|
|
|
|
}, function(e) { });
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('.recorder .stop').on('click', function() {
|
|
|
|
|
|
|
|
$this = $(this);
|
|
|
|
|
|
|
|
$recorder = $this.parent();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
recorderObject = $recorder.data('recorderObject');
|
|
|
|
|
|
|
|
recorderObject.stop();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
recorderObject.exportMP3(function(base64_mp3_data) {
|
|
|
|
|
|
|
|
var url = 'data:audio/mp3;base64,' + base64_mp3_data;
|
|
|
|
|
|
|
|
var au = document.createElement('audio');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
au.controls = true;
|
|
|
|
|
|
|
|
au.src = url;
|
|
|
|
|
|
|
|
$recorder.append(au);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
recorderObject.logStatus('');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var blob = dataURItoBlob(url);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let file = new File([blob], "audio.mp3",{type:"audio/mpeg"});
|
|
|
|
|
|
|
|
let container = new DataTransfer();
|
|
|
|
|
|
|
|
container.items.add(file);
|
|
|
|
|
|
|
|
document.getElementById("uploadedFile").files = container.files;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function dataURItoBlob(dataURI) {
|
|
|
|
|
|
|
|
// convert base64/URLEncoded data component to raw binary data held in a string
|
|
|
|
|
|
|
|
var byteString;
|
|
|
|
|
|
|
|
if (dataURI.split(',')[0].indexOf('base64') >= 0)
|
|
|
|
|
|
|
|
byteString = atob(dataURI.split(',')[1]);
|
|
|
|
|
|
|
|
else
|
|
|
|
|
|
|
|
byteString = unescape(dataURI.split(',')[1]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// separate out the mime component
|
|
|
|
|
|
|
|
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// write the bytes of the string to a typed array
|
|
|
|
|
|
|
|
var ia = new Uint8Array(byteString.length);
|
|
|
|
|
|
|
|
for (var i = 0; i < byteString.length; i++) {
|
|
|
|
|
|
|
|
ia[i] = byteString.charCodeAt(i);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return new Blob([ia], {type:mimeString});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|