Play .Wav Sound File Encoded in Base64 with JavaScript

play .wav sound file encoded in base64 with javascript

That doesn't look like the correct way to use the Audio constructor for HTMLAudioElement / <audio>.

Slight adjustment

var snd = new Audio("data:audio/wav;base64," + base64string);
snd.play();

If it works in console but not in script, it may be getting garbage collected, in which case scope it so it will stay

var Sound = (function () {
    var df = document.createDocumentFragment();
    return function Sound(src) {
        var snd = new Audio(src);
        df.appendChild(snd); // keep in fragment until finished playing
        snd.addEventListener('ended', function () {df.removeChild(snd);});
        snd.play();
        return snd;
    }
}());
// then do it
var snd = Sound("data:audio/wav;base64," + base64string);

how add audio in html5 with base64 encoding

You can have an HTML5 audio tag in base64 encoding as so:

<audio controls autoplay loop src="data:audio/ogg;base64,BASE64CODE" />

No need for a type! :)

Why does encoding wav file to base64 with python and online webapp give different results?

Came back to this after a while and the problem became apparent. It was just a problem with the block of code I mentioned in OP (the second block) that I used to write the base64 encoding to a file.

base64.b64encode(f1.read()) returns a bit string, which in Python, is symbolized with the following notation (i.e. when you print/write it, you'll see it like this): b'string goes here'. So the issue was just that the b' ' was wrapped around my actual base64 string, and I was using that. All I had to do get rid of the b' ' which I did by converting the bitstring to ASCII like this: str(encoded_f1,'ascii', 'ignore').

Really silly mistake, but hopefully it helps someone out.

How to play a base64 response from Google Text to Speech as an mp3 audio in browser using Javascript

I'm leaving this answer as information about this case for the community:

• window.atob()

  The atob() method decodes a base-64 encoded string.

• texttospeech.googleapis.com (response structure)

{ "audioContent": string }
// A base64-encoded string.

Its not needed to decoded when you are formating the mp3 string with the codec structure. You can see a similar response here.

For additional details about the response from the texttospeech api:

• text-to-speech -> synthesize -> response-body

HTML5 base64 encoded audio on mobile devices

The reason might not be a technical one here, from Apple developer site:

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

same applies to Android devices.

read more here: Safari HTML5 Audio and Video Guide

Save base64 audio file to folder in nodejs

As mentioned, your Base64 audio is a raw RIFF/WAV file, and can be directly written as a .wav file

const fs = require('fs')

const wavUrl = 'data:audio/wav;base64,UklGRryMMgBXQVZFZm10IBAAAAABAAIARKwAABCxAgAEA...'
const buffer = Buffer.from(
  wavUrl.split('base64,')[1],  // only use encoded data after "base64,"
  'base64'
)
fs.writeFileSync('./audio.wav', buffer)
console.log(`wrote ${buffer.byteLength.toLocaleString()} bytes to file.`)

If you truly have an Opus or MP3 file, you must decode it to raw PCM audio first, then create a buffer with both WAV headers and the PCM data before writing the .wav file.

Convert base64 audio to file

You have binary data encoded in base64 string here. First of all you need trim data url meta info. Then you can create binary buffer from base64 string and store it to file.

fs.writeFileSync('file.ogg', Buffer.from(base64data.replace('data:audio/ogg; codecs=opus;base64,', ''), 'base64'));

how to decode base64 audio data to wav format

Instead of using base64 string I have used "dataUrl" from my code and storing this "dataUrl" data to server using Ajax.

So whenever I want to play my recorded audio i just simply get the data using ajax and response data will be added in audio source like the below code.

var audio_obj = new Audio();
audio_obj = data; //ajax response data
audio_obj.play();

---

Related Topics