Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with audio recorded with HTML5 audio recorder #530

Open
AndreSteenbergen opened this issue Aug 15, 2019 · 4 comments
Open

Issues with audio recorded with HTML5 audio recorder #530

AndreSteenbergen opened this issue Aug 15, 2019 · 4 comments

Comments

@AndreSteenbergen
Copy link

AndreSteenbergen commented Aug 15, 2019

I have recorded audio/webm;codec=opus using firefox and also testing in chrome. In firefox I can't seem to seek, duration seems infinite and after playback the position is not reset to the start.
Error: Cannot seek a non-seekable stream

I recorded using react-mic, and the source is a bloburl. The issue does not occur when I use the regular html5 audio tag.

Chrome does reset the stream after onended is called. But duration is infinite as well. Am I doing something wrong?

@AndreSteenbergen
Copy link
Author

AndreSteenbergen commented Aug 15, 2019

When I choose to record to audio/ogg I do get a duration in google chrome; still no duration in firefox; and also no reset of currentTime

@AndreSteenbergen
Copy link
Author

Tried some more debugging, but I can't seem to figure out what is going on.
I attached an image showing the stream is not seekable; I would have assumed audio/ogg is seekable.

image

@bvibber
Copy link
Owner

bvibber commented Aug 15, 2019

I believe not all browsers allow using a faux HTTP Range header on XMLHttpRequest to blob URIs, which would prevent seeking. (The native audio element has no such limitation because it can get at the underlying resource.)

For Ogg, seeking is required to get the duration unless it's specified in skeleton header data (which is unlikely for audio, but possible).

Note that Safari does support range requests on blob URIs, so if you're using ogv.js as a Safari compatibility shim it should work there.

If you for some reason need to use ogv.js in Chrome and Firefox too, a possible but ugly workaround is to create a custom StreamFile-compatible object that chops up the blob with blob.slice() to read chunks, and setting that as options.stream instead of using URL.createObjectURL() and passing that into the src attribute.

Unfortunately I'm not sure I can make that transparent as there's no way I know of to get the original Blob back from the URL string; there may be though that I just haven't realized yet. :)

@AndreSteenbergen
Copy link
Author

Ah ok, thanks. I do have the original blob. But I guess I will do things more simple ;)

getAudioPlayer(recording) {
    let player = new Audio;
    let elementCanPlayType = player.canPlayType(recording.options.mimeType);
    if (!elementCanPlayType) {
      player = new ogv.OGVPlayer();
    }
        
    player.src = recording.blobURL;
    player.type = recording.options.mimeType;

    player.ontimeupdate = (evt) => {      
      this.setState( {
        currentTime : player.currentTime,
        duration : player.duration
      } );
    }

    player.onended = () => this.stopAudio();
    return player;
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants