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 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%}