MP3 to Base64 Encoder and Decoder Tool

Example of using the Web Audio API to load a sound file as an ArrayBuffer, encode and decode the ArrayBuffer and start playing audio on user-click.

How To Add MP3 to Base64 Encoder and Decoder Tool To Your Website

To create MP3 to Base64 Encoder and Decoder Tool using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Steps for Creating MP3 to Base64 Encoder and Decoder Tool

1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
5. Download the background image and put this image inside the project folder. This is the website background image.

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download all the source code files of the Website with the Shift Media, by clicking on the given download button.

First, paste the following codes into your index.html file.

HTML CODE </>

<input type="file" accept="audio/*">
<button onclick="playSound()" disabled>Start</button>
<button onclick="stopSound()" disabled>Stop</button>
<div>
    <p>This will be the output of a base64 string representation of your sound file.</p>
    <textarea id="encodedResult" cols="100" rows="10">
</textarea>
</div>

Second, paste the following codes into your style.css file.

CSS CODE </>

<style>
    input[type=file]::file-selector-button {
        border: 3px solid darkslategrey;
        padding: 6px 6px;
        margin: 0px 0 0px 0px;
        border-radius: 10px;
        background-color: #fff;
        transition: 1s;
        cursor: pointer;
        font-size: 22px;
    }

    input[type=file]::file-selector-button:hover {
        background-color: #00ff00;
        border: 3px solid #00cec9;
    }

    button {
        cursor: pointer;
        padding: 6px 16px;
        background-color: lawngreen;
        color: navy;
    }

    textarea {
        border: 3px solid #00cec9;
    }
</style>

Third, paste the following codes into your script.js file.

JAVASCRIPT CODE </>

<script src="script.js">
    var context = new AudioContext();
    var source = null;
    var audioBuffer = null;
    // Converts an ArrayBuffer to base64, by converting to string 
    // and then using window.btoa' to base64. 
    var bufferToBase64 = function(buffer) {
        var bytes = new Uint8Array(buffer);
        var len = buffer.byteLength;
        var binary = "";
        for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa(binary);
    };
    var base64ToBuffer = function(buffer) {
        var binary = window.atob(buffer);
        var buffer = new ArrayBuffer(binary.length);
        var bytes = new Uint8Array(buffer);
        for (var i = 0; i < buffer.byteLength; i++) {
            bytes[i] = binary.charCodeAt(i) & 0xFF;
        }
        return buffer;
    };

    function stopSound() {
        if (source) {
            source.stop(0);
        }
    }

    function playSound() {
        // source is global so we can call .stop() later.
        source = context.createBufferSource();
        source.buffer = audioBuffer;
        source.loop = false;
        source.connect(context.destination);
        source.start(0); // Play immediately.
    }

    function initSound(arrayBuffer) {
        var base64String = bufferToBase64(arrayBuffer);
        var audioFromString = base64ToBuffer(base64String);
        document.getElementById("encodedResult").value = base64String;
        context.decodeAudioData(audioFromString, function(buffer) {
            // audioBuffer is global to reuse the decoded audio later.
            audioBuffer = buffer;
            var buttons = document.querySelectorAll('button');
            buttons[0].disabled = false;
            buttons[1].disabled = false;
        }, function(e) {
            console.log('Error decoding file', e);
        });
    }
    // User selects file, read it as an ArrayBuffer and pass to the API.
    var fileInput = document.querySelector('input[type="file"]');
    fileInput.addEventListener('change', function(e) {
        var reader = new FileReader();
        reader.onload = function(e) {
            initSound(this.result);
        };
        reader.readAsArrayBuffer(this.files[0]);
    }, false);
    // Load file from a URL as an ArrayBuffer.
    // Example: loading via xhr2: loadSoundFile('sounds/test.mp3');
    function loadSoundFile(url) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function(e) {
            initSound(this.response); // this.response is an ArrayBuffer.
        };
        xhr.send();
    }
</script>

CLICK ON SAVE, button to save your work.

That’s all, now you’ve successfully created MP3 to Base64 Encoder and Decoder Tool. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

This Design	MP3 to Base64 Encoder and Decoder Tool
Developed By: Shift Media Solutions®️(SMS)	Demo/Source Code
Owner: Shift Media	Responsive: No SMS24

Many developers and web users now demand the conversion of MP3 to Base64. Base64 is the collective name for a number of encoding methods that transform binary data into a base64 representation by treating it as a number. Base64 is the name of a specific MIME content transfer encoding. Each Base64 digit corresponds to exactly 6 bits of data. Therefore, three 8-bit bytes, or a total of 24 bits, may be represented by four 6-bit Base64 digits.

In recent years, the world of digital audio encoding has grown more complicated. Choosing the best method to convert an audio file might be challenging because there are so many options available. Thankfully, there are numerous online forums and communities that assist users with encoding and decoding audio data. These online forums are rife with beneficial tools that make working with digital audio files simpler, such as encoders, decoders, and code converters.

Audio to Base64

MP3 to Base64 Encoder and Decoder conversion may be done in a few different ways. With little to no work, the procedure may be automated with this program. Choose the MP3 file you want to convert in the first step. The utility will automatically encode the specified file into Base64 text.

A popular tool for encoding files is the File to Base64 converter, which helps users to quickly and easily convert any type of file into a base64 string. This tool is widely used on video-sharing websites and forums, and on many javascript-based websites. The ability to quickly and easily convert files from their original format to a base64 string has solved many encoding and decoding issues for users. Additionally, online forums are full of useful how-tos when it comes to converting files, such as MP3 to AAC conversion, or WAV to MP3 conversion.