javascript - Play wav byte data on the browser on a player - Stack Overflow

Can someone please help me on this issue I am a little confused, i am getting wav data from database, and I can manage to play this wav data on the browser using this function :

function playWave(byteArray) {
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var myAudioBuffer = audioCtx.createBuffer(1, byteArray.length, 8000);
    var nowBuffering = myAudioBuffer.getChannelData(0);
    for (var i = 0; i < byteArray.length; i++) {
        nowBuffering[i] = byteArray[i];
    }

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

Everything works fine, I only need a GUI player to play/pause/stop and eventually draw a spectrum.

First I tried to use the audio tag of HTML5 but you need to put a valid url in src paramater :

<audio controls="controls">
  Your browser does not support the &lt;audio&gt; tag. 
  <source src="../m/example.mp3" />
</audio> 

Is it possible to change the src parameter to something like a method where you can put and play your byte array? Is there any player that can handle this kind of situation? I just want to play a wav from database on a player (play/pause/stop) with a certain rate (8000Hz), it seems to be an easy issue, but I found no article or documentation talking about that on the internet. The only players I found on the internet , you need to provide a valid file.

Can someone please help me on this issue I am a little confused, i am getting wav data from database, and I can manage to play this wav data on the browser using this function :

function playWave(byteArray) {
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var myAudioBuffer = audioCtx.createBuffer(1, byteArray.length, 8000);
    var nowBuffering = myAudioBuffer.getChannelData(0);
    for (var i = 0; i < byteArray.length; i++) {
        nowBuffering[i] = byteArray[i];
    }

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

Everything works fine, I only need a GUI player to play/pause/stop and eventually draw a spectrum.

First I tried to use the audio tag of HTML5 but you need to put a valid url in src paramater :

<audio controls="controls">
  Your browser does not support the &lt;audio&gt; tag. 
  <source src="../m/example.mp3" />
</audio> 

Is it possible to change the src parameter to something like a method where you can put and play your byte array? Is there any player that can handle this kind of situation? I just want to play a wav from database on a player (play/pause/stop) with a certain rate (8000Hz), it seems to be an easy issue, but I found no article or documentation talking about that on the internet. The only players I found on the internet , you need to provide a valid file.

• javascript
• html
• audio

Share Improve this question Follow asked May 24, 2017 at 11:47 Mehdi SouregiMehdi Souregi 3,27555 gold badges3838 silver badges5858 bronze badges 3

• > I can manage to play this wav data on the browser using this function. You say the snippet works for you. Why do you need an audio tag? – user2065736 Commented May 24, 2017 at 11:53
• he needs the audio playback controls, not just to play audio – Eduard Void Commented May 24, 2017 at 11:58
• exaclty, and I am wondering how other people manage to play sounds (with all the audio playback controls) stored as bytes on DB – Mehdi Souregi Commented May 24, 2017 at 12:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You should be able to use Blob after converting the byteArray correctly. You can then create a blob Object URL and set that as src on the source element:

// Create blob from Uint8Array & Object URL.
const blob = new Blob([getByteArray()], { type: 'audio/wav' });
const url = URL.createObjectURL(blob);

// Get DOM elements.
const audio = document.getElementById('audio');
const source = document.getElementById('source');

// Insert blob object URL into audio element & play.
source.src = url;
audio.load();
audio.play();

// Get data from database/server, hardcoded here for simplicity.
function getByteArray() {
  const data = [82, 73, 70, 70, 222, 37, 0, 0, 87, 65, 86, 69, 102, 109, 116, 32, 16, 0, 0, 0, 1, 0, 1, 0, 68, 172, 0, 0, 136, 88, 1, 0, 2, 0, 16, 0, 100, 97, 116, 97, 186, 37, 0, 0, 0, 0, 255, 12, 2, 27, 254, 40, 2, 55, 254, 68, 1, 83, 0, 83, 0, 69, 0, 55, 255, 40, 2, 27, 253, 12, 3, 255, 254, 240, 0, 227, 1, 213, 255, 198, 1, 185, 255, 170, 1, 175, 255, 188, 1, 203, 255, 216, 1, 231, 255, 244, 2, 3, 254, 16];

  // Convert byteArray into Uint8Array.
  return new Uint8Array(data);
}

<audio controls="controls" id="audio" loop>
  Your browser does not support the &lt;audio&gt; tag. 
  <source id="source" src="" type="audio/wav" />
</audio>

☝️