STATUS ÜBERPRÜFEN
I AM LISTENING TO
|

Hosting MP3 files on Google Drive + HTML5 Audio Player

5. Februar 2022
.SHARE

Inhaltsverzeichnis

What Google Drive Sharing offers us!

I am doing a Podcast on portalZINE.TV since last year and always host a backup of the MP3 episodes on Google Drive.

The link that you create, when enabling file sharing on Google Drive, can not be used to actually embed it on your website.

The link looks something like that:

To actually use it directly, we need to get the ID. Sure, you  could just extract the ID, but often we just want to copy and paste. The sharing link is also your actual reference to the original file, which I store together with the podcast.

Apply a simple RegEX

We use a simple Regex to extract the ID:

PHP

JAVASCRIPT

Just use it!

This ID can than be used to embed the file directly using HTML5 audio controls.

Its important to use the „https://docs.google.com/uc?export=open&id=“ url to open the file, as it provides the direct access to the shared file

<audio controls> <source src=“https://docs.google.com/uc?export=open&id=<?php echo $GoogleDriveFileID; ?>“ type=“audio/mp3″> <p>This browser does not support HTML5 audio</p> </audio>

Let’s Talk!

Suchen Sie einen zuverlässigen Partner, der Ihr Projekt auf die nächste Stufe bringt? Ob es sich um Entwicklung, Design, Sicherheit oder laufenden Support handelt – ich würde mich gerne mit Ihnen unterhalten und herausfinden, wie ich Ihnen helfen kann.

Nehmen Sie Kontakt auf,
und lassen Sie uns gemeinsam etwas Erstaunliches schaffen!

RELATED POSTS

Remember when Google’s Accelerated Mobile Pages (AMP) was the hot new technology everyone was rushing to implement? It promised lightning-fast mobile experiences, prime placement in search results, and that distinctive bolt icon that signaled to users your site was optimized for speed. But as we move through 2025, many are questioning whether AMP still deserves […]

In modern web development, providing rich code editing experiences is increasingly common. Whether you’re building a CMS, documentation platform, or coding playground, you’ll likely need a way to transform plain HTML textareas into powerful code editors. This post explores the most popular JavaScript libraries that enable this functionality, comparing them by features, performance, and implementation […]

JavaScript libraries and frameworks continue to evolve at a rapid pace, providing developers with powerful tools to build efficient, scalable, and interactive web applications. As we progress through 2025, the ecosystem has matured with established favorites maintaining their dominance while new innovative solutions emerge to address modern development challenges. Whether you’re working on a simple […]

Alexander

Ich bin ein Full-Stack-Entwickler. Meine Fachkenntnisse umfassen:

  • Server-, Netzwerk- und Hosting-Umgebungen
  • Datenmodellierung / Import / Export
  • Geschäftslogik
  • API-Schicht / Aktionsschicht / MVC
  • Benutzeroberflächen
  • Benutzererfahrung
  • Verstehen, was der Kunde und das Unternehmen brauchen

Ich habe eine große Leidenschaft für das Programmieren, das Design und die Serverarchitektur – jeder dieser Bereiche beflügelt meine Kreativität, und ich würde mich ohne sie nicht vollständig fühlen.

Mit einem breiten Spektrum an Interessen erforsche ich ständig neue Technologien und erweitere mein Wissen, wo immer es nötig ist. Die Welt der Technik entwickelt sich rasant, und ich liebe es, mit den neuesten Innovationen Schritt zu halten.

Jenseits der Technologie schätze ich den Frieden und umgebe mich mit Gleichgesinnten.

Ich glaube fest an das Prinzip: Helfen Sie anderen, und die Hilfe wird zu Ihnen zurückkommen, wenn Sie sie brauchen.