Using HTML5 audio tag to stream MP3 files from Google Drive

Other Questions Google drive
1

I’m trying to figure out how to stream MP3 files hosted on Google Drive using the HTML5 audio tag. I’ve been using the MediaElement.js plugin to help with this. It’s working fine in Chrome and Firefox but I’m having issues with IE11, Safari, and Opera.

Does anyone know a way to make this work across all major browsers? I’m really stuck and could use some advice on how to tackle this problem. Maybe there’s a better approach or a different plugin I should be using?

Here’s a basic example of what I’m working with:

<audio id="myAudio" controls>
  <source src="https://drive.google.com/uc?export=download&id=YOUR_FILE_ID" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<script>
  var player = new MediaElementPlayer('#myAudio', {
    // Options here
  });
</script>

Any suggestions would be greatly appreciated!

2

I’ve dealt with similar cross-browser audio streaming issues before, and it can be quite a headache. In my experience, using a third-party service like SoundCloud or Spotify for hosting and streaming can be a more reliable solution than Google Drive, especially for cross-browser compatibility.

If you’re set on using Google Drive, you might want to look into using the Google Drive API instead of direct links. This approach gives you more control over how the files are served and can help with some browser-specific issues.

Another option I’ve had success with is using a JavaScript library like Howler.js. It handles a lot of the cross-browser inconsistencies for you and provides a simpler API to work with.

Lastly, make sure your Google Drive sharing settings are correct. Sometimes permissions issues can cause playback problems in certain browsers. Hope this helps point you in the right direction!

3

hey, have u tried using jplayer? its pretty good for streaming audio across browsers. i’ve used it before and it worked well with google drive links. here’s a quick example:

$("#jquery_jplayer_1").jPlayer({
  ready: function () {
    $(this).jPlayer("setMedia", {
      mp3: "https://drive.google.com/uc?export=download&id=YOUR_FILE_ID"
    }).jPlayer("play");
  },
  swfPath: "/js",
  supplied: "mp3"
});

give it a shot, might solve ur problem!

4

I’ve encountered similar challenges when streaming audio across different browsers. One approach that’s worked well for me is using the Plyr library (GitHub - sampotts/plyr: A simple HTML5, YouTube and Vimeo player). It’s lightweight, customizable, and handles cross-browser compatibility issues quite well.

Here’s a basic setup you could try:

<div id="player" data-plyr-provider="html5" data-plyr-embed-id="myAudio">
  <audio id="myAudio">
    <source src="https://drive.google.com/uc?export=download&id=YOUR_FILE_ID" type="audio/mp3">
  </audio>
</div>

<script>
  const player = new Plyr('#player');
</script>

This setup has worked consistently for me across various browsers, including IE11. Just make sure to include the Plyr CSS and JS files in your HTML. Also, consider using a CDN for your audio files if Google Drive continues to cause issues.