Unable to hear sound properly through Web Audio

Question

Unable to hear sound properly through Web Audio

I'm experimenting with playing a wav file using the AudioContext. I've noticed that it plays correctly when loaded with the <audio> tag (as demonstrated in this example on jsFiddle), but encounters issues when using AudioContext.

var startButton = document.getElementById('start-stream');
var wav = new wavefile.WaveFile();
startButton.onclick = function() {
  audioCtx = new AudioContext();
  wav.fromBase64(mydata);

  buffer = audioCtx.createBuffer(1, audioCtx.sampleRate * 3, audioCtx.sampleRate);

  // add audio data to buffer
  buffer.getChannelData(0).set(wav.getSamples());

  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.start();
};

You can view the code on this fiddle: https://jsfiddle.net/Persiancoffee/6v8dLt3f/7/

javascript html5-audio web-audio-api audiocontext

Answer 1

Answer №1

With the decodeAudioData() function provided by the Web Audio API, you can easily decode WAV files without the need for external libraries. This function will generate an AudioBuffer that you can use in your application.

startButton.onclick = async function () {
    audioCtx = new AudioContext();

    const arrayBuffer = Uint8Array.from(
        atob(mydata),
        (char) => char.charCodeAt(0)
    ).buffer;

    buffer = await audioCtx.decodeAudioData(arrayBuffer);
    
    source = audioCtx.createBufferSource();
    source.buffer = buffer;
    source.connect(audioCtx.destination);
    source.start();
};

Check out the updated version of your fiddle here: https://jsfiddle.net/pzx0vg89/.

Answer 2

With the decodeAudioData() function provided by the Web Audio API, you can easily decode WAV files without the need for external libraries. This function will generate an AudioBuffer that you can use in your application.

startButton.onclick = async function () {
    audioCtx = new AudioContext();

    const arrayBuffer = Uint8Array.from(
        atob(mydata),
        (char) => char.charCodeAt(0)
    ).buffer;

    buffer = await audioCtx.decodeAudioData(arrayBuffer);
    
    source = audioCtx.createBufferSource();
    source.buffer = buffer;
    source.connect(audioCtx.destination);
    source.start();
};

Check out the updated version of your fiddle here: https://jsfiddle.net/pzx0vg89/.

Unable to hear sound properly through Web Audio

Answer №1

Similar questions

Tips for adjusting the dimensions of a cube using keyboard shortcuts:

Selection determines the value of two fields

Updating JSON data in real time using JavaScript by manipulating MySQL database entries

Adjust the background color of children based on the parent's mouseover event

Including folders recursively using Node.js

I'm experiencing a problem when trying to add a document to Firebase Firestore using React Native - it doesn't seem to

Assign a value to the active textbox using JavaScript

Why is JavaScript globally modifying the JSON object?

Using multiple MaterialUI components in a JavaScript page with React can pose challenges

The absence of defined exports in TypeScript has presented a challenge, despite attempting various improvement methods

Updating Angular 5 Views Dynamically Using a While Loop

Is it feasible to send props to { children } within a React functional component?

View a specific selected newsAPI article on its own dedicated page

Assigning multiple values to a key within a JavaScript object

Loading indicator displayed at the top of a div using JavaScript/jQuery

Leverage AJAX on the client-side for optimal performance while utilizing node.js

Cause: Trying to serialize an `object` that is not JSON serializable (such as a "[object Date]"). Ensure that only JSON serializable data types are returned

Utilizing JavaScript to assign a CSS class to an <li> list item

Upgrade your development stack from angular 2 with webpack 1 to angular 6 with webpack 4

creating circular shapes with canvas functions