11

I'm creating a chrome app that decrypts mp3s sent from my PBX server to my gmail account and plays them. I have completed everything except for the audio player in gmail. I have two options:

  1. Use Web Audio API (I got it working but can't figure out how to make a fully functional seek bar).
  2. Create an createObjectURL from the array and pass to either audio tag or soundmanager2.

I want to reuse code as much as possible and haven't been able to find a pre-made Web Audio API player with seekbar. So, I attempted to try option 2 and the following is as far as I went

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
context.decodeAudioData(arr.buffer, function (soundBuffer) {
    windowURL = window.URL || window.webkitURL;
    var audio = document.createElement("audio");
    audio.src = windowURL.createObjectURL([soundBuffer]);
    var someDiv = document.getElementById("testDiv");
    someDiv.appendChild(audio);
    audio.onload = function (e) {
        windowURL.revokeObjectURL(this.src);
    }
}, function (err) {
   console.log("couldnt decode buffer");
});

It fails with "Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided." How should I properly code this function to create an url that can used by chrome's mp3 player or soundmanager2?

SILENT
  • 3,916
  • 3
  • 38
  • 57
  • Is my question difficult to understand? – SILENT Jun 24 '14 at 00:59
  • Gmail plays MP3 attachments for me already. Are you sure you need to make a browser extension for this? – Brad Jun 24 '14 at 02:56
  • @Brad Gmail plays my mp3s as well. However, the mp3s sent from my PBX is encrypted and thus won't play unless I decrypt. My app decrypts the mp3s to play it. However, Im stuck on the stage where I have the soundbuffer but unable to play it with a versatile player (play/stop/seek/volume) – SILENT Jun 24 '14 at 03:04
  • @SILENT did you solve this? I would appreciate the answer. Thanks – elranu Sep 01 '15 at 13:05
  • 1
    @elranu I reattempted Option 1 and was able to script a player with seek capabilities. – SILENT Sep 13 '15 at 15:57

2 Answers2

6

You need to first create a Blob, and pass that as an argument for createObjectURL

....
const blob = new Blob([soundBuffer], { type: "audio/wav" });
audio.src = window.URL.createObjectURL(blob);
....

Source

douggard
  • 692
  • 1
  • 12
  • 29
Mahesh
  • 3,727
  • 1
  • 39
  • 49
  • Note that if you need to decode the arrayBuffer, this will detach the buffer, thus you won't be able to create the blob. Solution: get the array buffer, create the blob, decode the array buffer. – JohnDoe Mar 15 '20 at 09:47
2

Yes, you can do it

  1. Fetch arraybuffer and decode audio
  2. Create MediaSource with listener 'sourceopen'
  3. Use method appendBuffer to add you decoded audio to MediaSource

https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

Dima Melnik
  • 862
  • 9
  • 23