How to play audio loaded via file input-CodePudding

I want to load an audio file via input file reader and then be able to play it ...

Here is the process of creating file blob and assign the audio source to this blob:

    fileInput.on('change', readFile);

    function readFile(e) {
        const input = e.target;
        if(input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const binaryData = e.target.result;
                const binary = convertDataURIToBinary(binaryData); 
                const blob = new Blob(binary, {type: input.files[0].type });
                console.log('inserting blobXX', blob);
                recordedAudioComponent.src = URL.createObjectURL(blob);             
                data.instructAudios[component] = blob;
                console.log('recordedAudioComponent.src', recordedAudioComponent.src);
            
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

And here is the result of above code on console:

Now I'm trying to play the recordedAudioComponent which is an audio tag with the source right?

const recordedAudioComponent = document.getElementById(`recordedAudio-instruct-${component}`);
console.log(recordedAudioComponent)
recordedAudioComponent.play();

And here is the error it produces:

How can I fix this and play the audio?

EDIT: Here is the function to get the blob in the first code:

   var BASE64_MARKER = ';base64,';

    function convertDataURIToBinary(dataURI) {
      var base64Index = dataURI.indexOf(BASE64_MARKER)   BASE64_MARKER.length;
      var base64 = dataURI.substring(base64Index);
      var raw = window.atob(base64);
      var rawLength = raw.length;
      var array = new Uint8Array(new ArrayBuffer(rawLength));

      for(i = 0; i < rawLength; i  ) {
        array[i] = raw.charCodeAt(i);
      }
      return array;
    }

CodePudding user response：

You don't need any of convertion, blob is actually pretty similar from the file itself and the method URL.createObjectURL accepts file as argument, all you need to do to play the audio file from your browser is set the src attribute as the url created, something like this:

<body>
    <input style="display: block;" type="file" onchange="loadAudioFile(this)">
    <audio src=" " id="track" controls>
    </audio>
    <script>

        function loadAudioFile(e) {
            const url = URL.createObjectURL(e.files[0]);
            document.getElementById('track').setAttribute('src', url);
        }


    </script>
</body>

CodePudding user response：

<input type="file" name="fileInput" id="fileInput">
<script>
    const fileInput = document.querySelector('#fileInput');
    fileInput.onchange = readFile;

    /** @type {AudioNode} */
    const audio = document.createElement( 'audio' );

    function readFile(e) {
        const input = e.target;
        if(input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onloadend = function (e){
                audio.src = e.target.result;
                audio.play();
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</body>