Search code examples
htmlaudioonedrive

How can I directly embed audio that I have uploaded to OneDrive into HTML using the <audio> element?


I would like to know how I can directly embed an audio file that I have uploaded to OneDrive in HTML using the <audio> element.

  • I know there's always an Embed button in OneDrive, but I don't want that. That really only provides a big rectangle-shaped thing with a music icon and the filename, and when I click that, I'm still redirected to OneDrive. How can I really embed this using the HTML <audio> element?
  • I actually already tried the Copy Audio Location menu item from Firefox's context menu. It gave me a link that worked in the Dreamweaver's Live Preview (in the split view), but it didn't work in any other browser, including Firefox and Chrome.
  • I would like to use pure HTML to do this, i.e. no JavaScript.

Does anyone know how to do this? Thanks!


Solution

  • You can probably do it this way:

    1. Get the direct link to the file:

      • how to do it:

      • Open OneDrive and Copy Embed Code enter image description here

      • Paste the Embed Code and Modify: Now paste the embed code you copied in a notepad or a text editor. This code looks like this one – <iframe src="https://onedrive.live.com/embed?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8" width="98" height="120" frameborder="0" scrolling="no"></iframe>. You have to modify this code, remove everything except source URL of the file https://onedrive.live.com/embed?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8 and then just replace embed with download to get direct/permanent link. After this modification, the link should look like this – https://onedrive.live.com/download?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8

      • That’s the OneDrive direct or native link

    2. Use this link in the audio tag:

    <audio src="https://onedrive.live.com/download?cid=FA476CAFF1A7E75C&resid=FA476CAFF1A7E75C%21122&authkey=AN_axXpcOy7Zfl8"></audio>
    

    I mean provide into src the link you get from OneDrive.