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.
XPPL/app/templates/addaudio.html

109 lines
2.7 KiB
HTML

{% extends 'base.html' %}
{% block main %}
{% from "_formhelpers.html" import render_field %}
<h1 class="page-header">Add Message</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 style="width: 40%;">
message: {{ form.message(cols="45", rows="10", class="form-control") }}
</div>
<div id="audio">
<a onclick="record_audio()" href="#">record</a>
<a onclick="stop_audio()" href="#">stop</a>
<span id="seconds_rec"></span><span> seconds</span>
<div id="audio-player-container"></div>
</div>
<input type="file" name="file" id="uploadedFile" accept="audio/*"><br>
<button type="submit">Submit</button>
</form>
<clear>
{% endblock main %}
{% block js%}
<script>
var mediaRecorder;
var seconds_rec = 0;
var seconds_int;
function record_audio(){
seconds_int = setInterval(
function () {
document.getElementById("seconds_rec").innerHTML = seconds_rec;
seconds_rec += 1;
}, 1000);
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(audioChunks);
const audioUrl = URL.createObjectURL(audioBlob);
var sound = document.createElement('audio');
sound.id = 'audio-player';
sound.controls = 'controls';
sound.src = audioUrl;
console.log(audioUrl)
2 years ago
sound.type = 'audio/mpeg';
document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
const audio = new Audio(audioUrl);
//audio.play();
2 years ago
let file = new File([audioBlob], "audio.mp3",{type:"audio/mpeg"});
let container = new DataTransfer();
container.items.add(file);
document.getElementById("uploadedFile").files = container.files;
//const audio = new Audio(audioUrl);
//audio.play();
});
setTimeout(() => {
stop_audio()
}, 1000 * 60);
});
}
function stop_audio(){
clearInterval(seconds_int);
mediaRecorder.stop();
}
</script>
{% endblock js%}