Hogyan lehet audio fájlt beágyazni Google Drive-ból weboldalra?

Címkék
Hogyan lehet audio fájlt beágyazni Google Drive-ból weboldalra?
2022-01-28T21:12:20+01:00
2022-01-29T21:41:58+01:00
2022-08-12T07:05:30+02:00
DeltaHun
Azt szeretném elérni, hogy a Google Drive-ba feltöltött audio-t megjelenítsem a weboldalon.
Leginkább ezt a megoldást találtam:

<audio controls> <source src="https://docs.google.com/uc?export=open&id={id}" type="audio/mpeg"> Your browser does not support the audio element. </audio>
Sajnos nekem nem működik, valószínűleg azért, mert a link birtokában nem tekintheti meg akárki.
A másik megoldás, ami már a hozzáférési problémát megoldotta, az az iframe-es beágyazás:

<iframe id="test" src="https://drive.google.com/file/d/{id}/preview"></iframe>
Ezzel viszont az a gond, hogy nagyon sok felesleges dolgot is megjelenít, leginkább a szürke hátteret és az "új ablakba" gombot.
Arra gondoltam, hogy miután betöltötte az elemet, akkor utólag szerkesztem az elemben lévő body tagot, mivel a betöltött elem, ami a hátteret szürkére állítja, annak id-ja és class-ja véletlenszerűen van elnevezve:

var iframe = document.getElementById('test'); var style = document.createElement('style'); style.textContent = 'body {' + 'background-color: transparent;' + '}' ; iframe.contentDocument.head.appendChild(style);
Sajnos ezzel sem lettem előrébb, hiszen az child elementet a body háttérszíne nem változtatja meg. A szürke hátteret szerintem az is okozza, hogy azon a részen "kitöltetlen" a tartalom, viszont a lejátszó szélességét és magasságát nem igazán sikerült meghatározni.
Kérdésem, hogy valakinek volna-e ötlete, hogy hogyan lehetne igényesen beágyazni az audio-t anélkül, hogy a linken lévő jogosultságot átállítsam?
Mutasd a teljes hozzászólást!
Csatolt állomány
  • Szia!

    Nem kell IFrame, ez működik nálam:

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

    Az XYZ a linkben:

    https://drive.google.com/file/d/XYZ/view?usp=sharing

    A fájlt publikussá, mások számára elérhetővé tetted?

    Az URL-ből az id/azonosító megszerzése lépésekben:

    1. Link lekérése

    2. Link másolása (ebből kell az id)
    Mutasd a teljes hozzászólást!
  • Szia!
    Köszönöm szépen a választ!
    Sajnos nem tudom teljesen (mindenki számára) publikusra állítani, mert pont az lenne a cél, hogy csak X-Y felhasználó érhesse el a fájlt a link birtokában. iFrame esetében eléri/működik, ha be van jelentkezve és nem teljesen/mindenkinek (csak neki(k)) publikus a fájl, viszont kapott hozzáférést a fájlhoz Drive-on.
    Mutasd a teljes hozzászólást!
  • A legszebb megoldás valószínűleg a Google API lenne szerveroldalon (kliens oldalon C#-al egyébként is Rest API-s megoldás van).
    De ha lehet, azt kerülném egyelőre.
    Mutasd a teljes hozzászólást!
  • A feltöltött fájlt kezdd el letölteni böngészőben és a letöltés közben vagy a végén másold ki a letöltési linket. Ez egy nagyon hosszú link lesz.

    Szóval ezt elkezded letölteni:

    https://drive.google.com/file/d/--XYZ--/view

    És lesz egy ilyened:

    https://doc-10-4k-docs.googleusercontent.com/docs/securesc/jk60g48md8dsj11f5lmcapntibgl6t1a/h74n7cffenihg7fdq2prp59p6tq4k1kf/1643554300000/17118305146475862535/17118305136475862535/--XYZ--?e=download&authuser=0

    És ezt rakod a HTML-be:

    <audio controls> <source src="https://doc-10-4k-docs.googleusercontent.com/docs/securesc/jk60g48md8dsj11f5lmcapntibgl6t1a/h74n7cffenihg7fdq2prp59p6tq4k1kf/1643554300000/17118305146475862535/17118305136475862535/--XYZ--?e=download&authuser=0" type="audio/mpeg"> Your browser does not support the audio element. </audio>

    Nálam működik.
    Mutasd a teljes hozzászólást!
  • Az ötlet nagyon jó és akár működhet is, viszont nem teljesen értem, hogyan lehet megkapni azt a hosszú linket.
    Amikor elkezdem letölteni ezt
    https://drive.google.com/file/d/--XYZ--/view
    Akkor ezt kapom vissza (és csak rövid ideig mutatja a böngésző/Chrome), illetve néztem a network tabot is.

    https://drive.google.com/uc?id=---XYZ---&export=download
    A hosszabb linket hogyan kaptad meg? Lehet ezt valahogy automatizálni is?
    Köszönöm!
    Mutasd a teljes hozzászólást!
  • Azt vedd figyelembe a sok trükközés közepette, hogy a Drive nem erre való, illetve konkrétan meg is említik, hogy ellenlépéseket tehetnek:

    Google Drive allows you to store, share, and stream video content, but should not be used as a replacement for a content distribution network. For large-scale public streaming, YouTube is a better fit. Google Drive will restrict usage when it appears that it's being used for large-scale public streaming. Repeated violations may result in additional action, including terminating your account or ability to use Google Drive.

    Ha kicsiben csinálod, akkor valószínűleg nem riaszt be nekik semmi, és nem fogják észrevenni, de tisztább lenne saját tárhelyet venned, esetleg hozzá CDN-nel szerződni. (Igaz, az a Drive-val ellentétben valami minimális pénzbe is kerülne.)
    Mutasd a teljes hozzászólást!
  • Lépések:

    - első
    - második
    Mutasd a teljes hozzászólást!
  • Egyébként ezek a linkek szerintem csak egy ideig élnek, szóval tényleg vagy az API-t kellene használnod vagy keresni valami Drive alternatívát, ami esetleg támogathatja is az ilyesmit.
    Mutasd a teljes hozzászólást!
Címkék
abcd