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

244 lines
7.7 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 class="recorder">
Recorder
<input type="button" class="start" value="Record" />
<input type="button" class="stop" value="Stop" />
<pre class="status"></pre>
</div>
<!-- <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 id="audio-player-container"></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 = 0;
var seconds_int;
var audio;
var state = "empty";
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(){
// if(state == "empty"){
// navigator.mediaDevices.getUserMedia({ audio: true })
// .then(stream => {
// mediaRecorder = new MediaRecorder(stream);
// 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 = [];
// mediaRecorder.addEventListener("dataavailable", event => {
// audioChunks.push(event.data);
// });
// mediaRecorder.addEventListener("stop", () => {
// // console.log("stopping");
// // const audioBlob = new Blob(audioChunks, {type: 'audio/ogg; codecs=opus'});
// // const audioUrl = URL.createObjectURL(audioBlob);
// // var sound = document.createElement('audio');
// // sound.id = 'audio-player';
// // sound.controls = 'controls';
// // sound.src = audioUrl;
// // console.log(audioUrl)
// // sound.type = 'audio/ogg; codecs=opus';
// // document.getElementById("audio-player-container").innerHTML = sound.outerHTML;
// //audio.play();
// let file = new File(audioChunks, "audio.ogg",{type:"audio/ogg; codecs=opus"});
// 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'
// });
// setTimeout(() => {
// stop_audio()
// }, 1000 * 60);
// });
// }
}
function stop_audio(){
clearInterval(seconds_int);
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">'
}
}
$('.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>
{% endblock js%}