@ -3,7 +3,7 @@
{% block main %}
{% block main %}
{% from "_formhelpers.html" import render_field %}
{% from "_formhelpers.html" import render_field %}
< h1 class = "page-header" > Add Message < / h1 >
< h1 class = "page-header" > Add Audio < / h1 >
{% with messages = get_flashed_messages() %}
{% with messages = get_flashed_messages() %}
{% if messages %}
{% if messages %}
< div class = "alert alert-danger" >
< div class = "alert alert-danger" >
@ -20,18 +20,24 @@
{{ form.csrf_token }}
{{ form.csrf_token }}
< input type = "hidden" name = "longitude" value = "{{ longitude }}" / >
< input type = "hidden" name = "longitude" value = "{{ longitude }}" / >
< input type = "hidden" name = "latitude" value = "{{ latitude }}" / >
< input type = "hidden" name = "latitude" value = "{{ latitude }}" / >
< div style = "width: 40%;" >
message: {{ form.message(cols="45", rows="10", class="form-control") }}
< / div >
< div id = "audio" >
< div id = "audio" >
< a onclick = "record_audio()" href = "#" > record< / a >
< div class = "record_controls" >
< a onclick = "stop_audio()" href = "#" > stop< / a >
< a class = "record_btn audio_btn" id = "record_btn" onclick = "record_audio()" href = "#" > < span class = "icon" > < / span > record< / a >
< span id = "seconds_rec" > < / span > < span > seconds< / span >
< a class = "stop_btn audio_btn" id = "stop_btn" onclick = "stop_audio()" href = "#" > < span class = "icon" > < / span > stop< / a >
< a class = "play_btn audio_btn" id = "play_btn" onclick = "play_audio()" href = "#" > < span class = "progress_bar" > < / span > < span class = "icon_p" > < / span > play< / a >
< a class = "redo_btn audio_btn" id = "redo_btn" onclick = "redo_audio()" href = "#" > < / span > redo< / a >
< / div >
< div id = "audio-player-container" > < / div >
< div id = "audio-player-container" > < / div >
< / div >
< / div >
< input type = "file" name = "file" id = "uploadedFile" accept = "audio/*" > < br >
< input hidden = "true" type = "file" name = "file" id = "uploadedFile" accept = "audio/*" > < br >
< div style = "width: 100%;" >
message: < br > {{ form.message(class="form-control") }}
< / div >
< button type = "submit" > Submit< / button >
< button type = "submit" > Submit< / button >
@ -48,26 +54,32 @@
var mediaRecorder;
var mediaRecorder;
var seconds_rec = 0;
var seconds_rec = 0;
var seconds_int;
var seconds_int;
var audio;
var state = "empty";
function record_audio(){
function record_audio(){
seconds_int = setInterval(
if(state == "empty"){
function () {
document.getElementById("seconds_rec").innerHTML = seconds_rec;
seconds_rec += 1;
}, 1000);
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";
document.getElementById('stop_btn').style.display = 'block'
seconds_int = setInterval(
function () {
document.getElementById("record_btn").innerHTML = seconds_rec + " s";
seconds_rec += 1;
}, 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", () => {
const audioBlob = new Blob(audioChunks);
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';
@ -75,32 +87,68 @@ navigator.mediaDevices.getUserMedia({ audio: true })
sound.src = audioUrl;
sound.src = audioUrl;
console.log(audioUrl)
console.log(audioUrl)
sound.type = 'audio/mpeg';
sound.type = 'audio/mpeg';
document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
// document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
audio = new Audio(audioUrl);
audio.addEventListener("ended", function(){
audio.currentTime = 0;
document.getElementById("play_btn").innerHTML = '< span class = "icon_p" > < / span > play'
});
audio.addEventListener("timeupdate", function() {
var currentTime = audio.currentTime;
var duration = audio.duration;
$('.progress_bar').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},0,'linear');
});
document.getElementById('play_btn').style.display = 'block'
document.getElementById('redo_btn').style.display = 'block'
document.getElementById('stop_btn').style.display = 'none'
document.getElementById("record_btn").innerHTML = "recording…";
document.getElementById('record_btn').style.display = 'none'
const audio = new Audio(audioUrl);
//audio.play();
//audio.play();
let file = new File([audioBlob], "audio.mp3",{type:"audio/mpeg"});
let file = new File([audioBlob], "audio.mp3",{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;
//const audio = new Audio(audioUrl);
//audio.play();
});
});
setTimeout(() => {
setTimeout(() => {
stop_audio()
stop_audio()
}, 1000 * 60);
}, 1000 * 60);
});
});
}
}
}
function stop_audio(){
function stop_audio(){
clearInterval(seconds_int);
clearInterval(seconds_int);
mediaRecorder.stop();
mediaRecorder.stop();
}
function redo_audio(){
state = "empty";
seconds_rec = 0;
document.getElementById('play_btn').style.display = 'none'
document.getElementById('redo_btn').style.display = 'none'
document.getElementById('stop_btn').style.display = 'block'
document.getElementById('record_btn').style.display = 'block'
record_audio()
}
function play_audio(){
if(audio.paused){
audio.play();
document.getElementById("play_btn").innerHTML = '< / span > < span class = "icon_b" > < / span > < span class = "text" > pause< / span > < span class = "progress_bar" > '
}
else{
audio.pause();
document.getElementById("play_btn").innerHTML = '< / span > < span class = "icon_p" > < / span > < span class = "text" > play< / span > < span class = "progress_bar" > '
}
}
}
< / script > < / script >
Alexander Roidl
2 years ago