Store recorded audio on database

[SimonIoa]

Hello i want to make a script so that users can record audio through their mic.

I found this online
https://github.com/streamproc/MediaStreamRecorder/blob/master/demos/audio-recorder.html

but i how i can make the recorded audio to be stored on a table on my database?

[gabrielcastillo]

You better off storing the audio file within the file system and saving the file path into the database. If you want to store the audio file, you will need to store the file in binary, by using the BLOB datatype.

I would recommend saving the file on the file system. Less problems and database space will be used.

[Tpojka]

So show some code where you stuck.
I can recommend great article of how to ask for help.
Help us to help you. ;)

Other than that, you can use AJAX to move recorded file to DB since you have already the file name/location.
You can tweak invokeSaveAsDialog function of MediaStreamRecorder.js file.

[SimonIoa]

i have already made the script to upload an audio file but i want the user to be able to record something too.

Here is the script i've made for uploading audio

js

$(".audio_update_button").click(function() 
    {

        var updateval = $("#update_audio").val();


        var X=$('.preview_audio_photo').attr('id');
        var Y=$('.preview').attr('id');
        //var Z= X+','+Y+','+uploadvalues;
        var Z= X+','+Y;
        var dataString = 'update_audio='+ updateval+'&uploads='+Z;

        $("#flash").show();
        $("#flash").fadeIn(400).html('Loading..');
        $.ajax(
        {
            type: "POST",
            url: $.base_url+"ajax.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                $("#flash").fadeOut('fast');
                $("#content").prepend(html);
                $("#update_audio").val('').focus(); 
                $('#preview_audio_photo').html('');
                $('#preview').html('');
                $('#uploadvalues').val('');
                $('#uploadvalues_audio2').val('');
                $('#audiophoto').val('');
                $('#audioaud').val('');
                var c=$('#update_count').html();
                $('#update_count').html(parseInt(c)+1);

            }
        });

    });

html

 <form id="audioform1" method="post" enctype="multipart/form-data" action='message_audio_ajax1.php'>
                <div id='previewaudio'>
                </div>
                    <span id='addphoto'><?php echo $lang['AddAnAudioFile'];?>*:</span>
                <input type="file" name="audioaud" id="audioaud" />

                <input type='hidden' id='uploadvaluesaudio' />
            </form>

this works fine as long as uploading a file. but i dont know what to put <input type="file" name="audioaud" id="audioaud" /> so that it may hold the value of the recorded audio

here is the code for the recorded audio

html

<div>
        <label for="time-interval">Time Interval (milliseconds):</label>
        <input type="text" id="time-interval" value="5000">ms
        <button id="start-recording">Start</button>
        <button id="stop-recording" >Stop</button>

        <button id="pause-recording">Pause</button>
        <button id="resume-recording" >Resume</button>

        <button id="save-recording">Save</button>

        <br><br>
    </div>

    <div id="preview"></div>

js

  <script>
    function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
        navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
    }

    var mediaConstraints = {
        audio: true
    };

    document.querySelector('#start-recording').onclick = function() {
        this.disabled = true;
        captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
    };

    document.querySelector('#stop-recording').onclick = function() {
        this.disabled = true;
        mediaRecorder.stop();
        mediaRecorder.stream.stop();

        document.querySelector('#pause-recording').disabled = true;
        document.querySelector('#start-recording').disabled = false;
    };

    document.querySelector('#pause-recording').onclick = function() {
        this.disabled = true;
        mediaRecorder.pause();

        document.querySelector('#resume-recording').disabled = false;
    };

    document.querySelector('#resume-recording').onclick = function() {
        this.disabled = true;
        mediaRecorder.resume();

        document.querySelector('#pause-recording').disabled = false;
    };

    document.querySelector('#save-recording').onclick = function() {
        this.disabled = true;
        mediaRecorder.save();
    };

    var mediaRecorder;

    function onMediaSuccess(stream) {
        var audio = document.createElement('audio');

        audio = mergeProps(audio, {
            controls: true,
            muted: true,
            src: URL.createObjectURL(stream)
        });
        audio.play();

        audiosContainer.appendChild(audio);
        audiosContainer.appendChild(document.createElement('hr'));

        mediaRecorder = new MediaStreamRecorder(stream);
        mediaRecorder.stream = stream;
        mediaRecorder.mimeType = 'audio/ogg';
        mediaRecorder.audioChannels = !!document.getElementById('left-channel').checked ? 1 : 2;
        mediaRecorder.ondataavailable = function(blob) {
            var a = document.createElement('a');
            a.target = '_blank';
            a.innerHTML = 'Open Recorded Audio No. ' + (index++) + ' (Size: ' + bytesToSize(blob.size) + ') Time Length: ' + getTimeLength(timeInterval);

            a.href = URL.createObjectURL(blob);

            audiosContainer.appendChild(a);
            audiosContainer.appendChild(document.createElement('hr'));
        };

        var timeInterval = document.querySelector('#time-interval').value;
        if (timeInterval) timeInterval = parseInt(timeInterval);
        else timeInterval = 5 * 1000;

        // get blob after specific time interval
        mediaRecorder.start(timeInterval);

        document.querySelector('#stop-recording').disabled = false;
        document.querySelector('#pause-recording').disabled = false;
        document.querySelector('#save-recording').disabled = false;
    }

    function onMediaError(e) {
        console.error('media error', e);
    }

    var audiosContainer = document.getElementById('audios-container');
    var index = 1;

    // below function via: http://goo.gl/B3ae8c
    function bytesToSize(bytes) {
        var k = 1000;
        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        if (bytes === 0) return '0 Bytes';
        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
        return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
    }

    // below function via: http://goo.gl/6QNDcI
    function getTimeLength(milliseconds) {
        var data = new Date(milliseconds);
        return data.getUTCHours() + " hours, " + data.getUTCMinutes() + " minutes and " + data.getUTCSeconds() + " second(s)";
    }

    window.onbeforeunload = function() {
        document.querySelector('#start-recording').disabled = false;
    };
    </script>

[SimonIoa]

i think that the solution is that when you press the SAVE button then the id shoukd be stored in here

 <button id="save-recording">Save</button>


document.querySelector('#save-recording').onclick = function() {
        this.disabled = true;
        mediaRecorder.save();
    };