XPPL/app/templates/addaudio.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)
      sound.type     = 'audio/mpeg';
      document.getElementById("audio-player-container").innerHTML = sound.outerHTML;


      const audio = new Audio(audioUrl);
      //audio.play();
      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%}