You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
6.2 KiB
HTML
190 lines
6.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block main %}
|
|
{% from "_formhelpers.html" import render_field %}
|
|
|
|
<h1 class="page-header">Add Audio</h1>
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
<div class="alert alert-danger">
|
|
<ul>
|
|
{% for message in messages %}
|
|
<li>{{ message }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" action="{{ url_for('addaudio') }}" enctype=multipart/form-data>
|
|
{{ form.csrf_token }}
|
|
<input type="hidden" name="longitude" value="{{ longitude }}" />
|
|
<input type="hidden" name="latitude" value="{{ latitude }}" />
|
|
|
|
<div id="audio">
|
|
<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="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>
|
|
|
|
<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>
|
|
</form>
|
|
|
|
<clear>
|
|
{% endblock main %}
|
|
{% block js%}
|
|
|
|
<script>
|
|
|
|
var mediaRecorder;
|
|
var seconds_rec = 1;
|
|
var seconds_int;
|
|
var audio;
|
|
var state = "empty";
|
|
var audio_context;
|
|
var mimeType;
|
|
const recorder = new MicRecorder({
|
|
bitRate: 128
|
|
});
|
|
|
|
const audioChunks = [];
|
|
|
|
function record_audio(){
|
|
if(state == "empty"){
|
|
recorder.start().then(() => {
|
|
|
|
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);
|
|
|
|
setTimeout(() => {
|
|
stop_audio()
|
|
}, 1000 * 60);
|
|
|
|
}).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
}
|
|
|
|
function blobToFile(theBlob, fileName){
|
|
//A Blob() is almost a File() - it's just missing the two properties below which we will add
|
|
theBlob.lastModifiedDate = new Date();
|
|
theBlob.name = fileName;
|
|
return theBlob;
|
|
}
|
|
|
|
function makeLink(){
|
|
const audioBlob = new Blob(audioChunks, {type: 'audio/webm;codecs=opus'});
|
|
|
|
const audioUrl = URL.createObjectURL(audioBlob);
|
|
var sound = document.createElement('audio');
|
|
sound.id = 'audio-player';
|
|
sound.controls = 'controls';
|
|
sound.src = audioUrl;
|
|
console.log(audioBlob)
|
|
sound.type = 'audio/webm;codecs=opus';
|
|
document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
|
|
|
|
let file = new File([audioBlob], "audio.webm",{ type:"audio/webm;codecs=opus",lastModifiedDate: new Date()});
|
|
let container = new DataTransfer();
|
|
container.items.add(file);
|
|
document.getElementById("uploadedFile").files = container.files;
|
|
|
|
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'
|
|
};
|
|
|
|
function stop_audio(){
|
|
if(state == "recording"){
|
|
clearInterval(seconds_int);
|
|
state = "done";
|
|
recorder.stop().getMp3().then(([buffer, blob]) => {
|
|
console.log(buffer, blob);
|
|
const file = new File(buffer, 'music.mp3', {
|
|
type: blob.type,
|
|
lastModified: Date.now()
|
|
});
|
|
|
|
const li = document.createElement('li');
|
|
var audioUrl = URL.createObjectURL(file)
|
|
|
|
let container = new DataTransfer();
|
|
container.items.add(file);
|
|
document.getElementById("uploadedFile").files = container.files;
|
|
|
|
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'
|
|
|
|
}).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
}
|
|
|
|
function redo_audio(){
|
|
state = "empty";
|
|
seconds_rec = 1;
|
|
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>
|
|
|
|
{% endblock js%}
|