XPPL/app/templates/addaudio.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 id="audio-player-container"></div>
      <ul id="playlist"></ul>
    </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;
var mimeType;
const recorder = new MicRecorder({
      bitRate: 128
    });

const audioChunks = [];

function record_audio(){
    if(state == "empty"){
    // navigator.mediaDevices.getUserMedia({ audio: true })
    // .then(stream => {
    //   mediaRecorder = new MediaRecorder(stream, {mimeType: 'audio/webm;codecs=opus'}); // , {mimeType:"audio/ogg"}
    //   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);

      
    //   mediaRecorder.addEventListener("dataavailable", event => {
        
    //     audioChunks.push(event.data);
    //     if(mediaRecorder.state == 'inactive')  makeLink();
    //   });

    //   setTimeout(() => {
    //     stop_audio()
    //   }, 1000 * 60);
    // });


    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)
        // const player = new Audio(audioUrl);
        // player.controls = true;
        // li.appendChild(player);
        // document.querySelector('#playlist').appendChild(li);

        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 = 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>

{% endblock js%}