We hebben hier vorige week een interessante vraag ontvangen bij TechJunkie Towers. Het betrof iets waar ik nog nooit eerder over had nagedacht en wilde weten hoe MP3-audio in een webpagina met Google Drive kon worden ingesloten. Als iemand die een aantal websites voor organisaties beheert, werd de vraag aan mij overhandigd om te beantwoorden.
U host meestal alle media naast de website als u deze op een pagina wilt weergeven. Het houdt dingen netjes en vermindert het aantal externe zoekopdrachten dat uw webpagina moet maken tijdens het laden. Dat is echter niet de enige manier om dingen te doen en als u om een of andere reden uw audio niet naast uw website kunt hosten, kunt u Google Drive of een andere cloudservice gebruiken om het te hosten en naar uw webpagina te linken.
Hoewel deze tutorial de inbedding in een webpagina behandelt, is hetzelfde principe van toepassing op de meeste online pagina's. Dat kunnen sociale netwerken, blogs, wiki's, bestemmingspagina's of wat dan ook zijn.
Sluit audio in op een webpagina met Google Drive
Om audio op een webpagina in te sluiten, uploaden we normaal gesproken het MP3-bestand naar de webhost en plaatsen we het inline op de pagina. Hierdoor kan de pagina de host opvragen en de muziek snel en zonder verdere externe zoekopdrachten afspelen. Dat is niet altijd mogelijk. Als u niet over voldoende opslagruimte op uw webhost beschikt of als de host niet erg snel of geschikt is voor streaming, moet u ergens anders zoeken.
Dat is waar Google Drive of andere cloudservice van pas komt. U kunt de MP3 uploaden naar cloudopslag en er vanaf uw webpagina naar linken. Telkens wanneer iemand het nummer afspeelt dat ze streamen vanuit uw Drive in plaats van lokaal op uw webhost. Gezien hoe groot en krachtig Google-cloudservers zijn, kunt u dat net zo goed in uw voordeel gebruiken!
Hier is hoe het in te stellen:
- Log zoals gewoonlijk in op uw Google Drive.
- Maak een map en upload het MP3-bestand erin.
- Stel toestemming voor het MP3-bestand in op 'Aan - Openbaar op internet, Iedereen op internet kan zoeken en bekijken'.
- Bewaar de toestemming.
- Leg de deellink op de Share-pagina vast. Het begint met 'https://drive.google./com/…'
Dat is het om op te zetten. Uw MP3-bestand bevindt zich nu in de cloud en is voor iedereen toegankelijk via de deellink. We moeten die link nu online op uw webpagina plaatsen zodat anderen er toegang toe kunnen krijgen.
De link insluiten op uw pagina
Hoe u de deellink precies insluit, hangt af van wat u voor uw website gebruikt. U kunt een andere methode gebruiken voor WordPress of Joomla zoals u zou doen voor HTML of andere frameworks.
Uw MP3 insluiten op een WordPress-pagina:
- Open uw pagina in WordPress en maak ruimte voor het audiobestand.
- Selecteer de knop Media toevoegen boven aan de pagina-editor.
- Selecteer URL invoeren en plak de Google Drive-URL van bovenaf.
- Geef het een naam en een titel en vervolgens Media invoegen.
- Sla de pagina op als u klaar bent.
Als u een voorbeeld van de pagina bekijkt, zou u nu de link en de bijbehorende beschrijving moeten zien waar u deze op de pagina hebt geplaatst. Speel de media af en deze wordt onzichtbaar van je Google Drive via de pagina gestreamd. Het is een zeer nette manier om rich media aan een pagina toe te voegen zonder opslag op uw webhost te gebruiken.
Als u geen WordPress gebruikt en de code in een iFrame moet insluiten, is dat ook heel eenvoudig. Aangezien iFrames een webstandaard zijn, zouden de meeste frameworks en publicatieplatforms deze moeten ondersteunen. U hoeft dus alleen maar het iFrame te maken en op uw pagina te plaatsen.
Uw MP3-bestand insluiten met behulp van andere frameworks:
- Plak de Google Drive-deel-URL in een teksteditor.
- Wijzig '/ view' aan het einde van de URL voor '/ preview' en kopieer de hele URL.
- Plak het in de onderstaande code in plaats van de voorbeeld-URL na 'src ='.
- Open uw webpagina in een HTML-editor of gebruik de editor van uw platform.
- Plaats de volledige code inclusief de in uw pagina waar u deze wilt laten verschijnen.
- Sla het bestand op en test het.
De code:
frameborder = "0" width = "500" height = "250" src = "https://drive.google.com/file/d/MP3FILEURL/preview">
De speler moet op uw pagina verschijnen en het MP3-bestand afspelen wanneer dit is geselecteerd. Controleer na het uploaden zelf de link om te controleren of deze werkt. Publiceer dan de aangepaste pagina en geniet ervan!
Zo kunt u MP3-audio in een webpagina insluiten met Google Drive. Kent u andere manieren om dit te doen? Vertel het ons hieronder als u dat doet!
