I have mp3 recordings that I wish to embed onto my website. They are located in my dropbox and are just simple audio files. When I embed them with an audio tag like such, I can play them when I have my dropbox logged in, but they appear unplayable when I am a third party visitor to the website.
<audio src="https://dl-web.dropbox.com/get/therestofthelink" controls></audio>
any ideas how can I make these files permanently embedded, through dropbox or otherwise, so that every visitor to my site can successfully listen to them? thank you
You can create a share link (programmatically via the /shares endpoint or via the UI), which will give you a permanent publicly-visible link to a preview page for the file. To convert that link into one that points directly at the file content, refer to https://www.dropbox.com/help/201:
To bypass the preview page and allow your browser to directly render
your files, use raw=1 as a query parameter in your URL. For example:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx
Becomes:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx?raw=1
Note that this URL will cause an HTTP redirect. If you're an app developer using such a URL in your own code, please make sure your app can follow redirects.
At least in Wordpress text editor, you have to follow the below steps:
Create a share link to the file then change the www in the link
to dl. Use that new link in your embed code.
Remove the end of the link
e.g. if you have:
https://www.dropbox.com/s/bt44iw272m6ga04/O%20Botic%C3%A1rio%20-%20Dia%20dos%20Pais%20novo%20perfume%20Zaad%20-%20Comercial.mp3 ?dl=0
You have to change the first bold part and remove the second:
https://dl.dropbox.com/s/bt44iw272m6ga04/O%20Botic%C3%A1rio%20-%20Dia%20dos%20Pais%20novo%20perfume%20Zaad%20-%20Comercial.mp3
This worked for me.
Go the audio file in your dropbox on your desktop
Right click and select "copy Dropbox link"
Paste link in desired location
At the end of the URL there should be a "?dl=0" Simply replace the "0" with a "1" like so "?dl=1"
Code should look something like:
<audio controls>
<source src="https://www.dropbox.com/s/blah/yoursong.mp3?dl=1" type="audio/mpeg">
</audio>
You should upload the files directly in your webspace and link it from there.
On the other hand you can also use something like Soundcloud to make your audio files publicly available.
Related
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!
You can probably do it this way:
Get the direct link to the file:
how to do it:
Open OneDrive and Copy Embed Code
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
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.
I've seen many posts about using JS to embed SoundCloud tracks with API links, but I'm wondering if there is any possible way to use only the <audio> and a SoundCloud file link in HTML?
The reason I need this is because I'm using Google Sheets as a widget for my website to display a list of audio files from different sources and using other sites and getting the mp3 link and throwing it in the list for the template works well but I can't do that with SoundCloud.
Preview of widget here
I know this is the URL I need:
http://api.soundcloud.com/tracks/TRACKID/stream?client_id=CLIENTID
I've tried inspecting the web page for this information, and it's not provided. I can only get the track ID.
My google sheet's template is connected to an app called awesome-table so I can put down a long list of data without needing to manually write the HTML each time so I need to make it a uniform process.
Each cell is referred to as {{URL}} in the following example
<audio controls> <source src="{{URL}}" type="audio/mpeg"> </audio>
The additional details, such as the third-party applications, are just to explain why I'm doing it this way. The question is simply how to get the right data of a Soundcloud track in a way I can directly apply <audio controls> <source src="(soundcloud track here)" type="audio/mpeg"> </audio>
Currently, the only way to do this is if the author has enabled RSS feed for the track and by using that RSS URL in the audio source.
http://feeds.soundcloud.com/stream/example.mp3
sorry if I am kind of late, but here is the correct answer:
Go copy the song URL (not the search result, be careful!)
Now, if you have VLC Media Player downloaded, open the app.
Press CTRL+N and paste it into the box.
Hit enter.
Your song will now load.
Rightclick the song name (be sure you are in playlist view in VLC) and click information (i).
On the bottom there should be a box with the text: File location.
Rightclick the box, click select all, and CTRL+C.
Now, this is your direct mp3 link.
This is mine.
https://cf-media.sndcdn.com/gesLueRDE5tg.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vZ2VzTHVlUkRFNXRnLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE2MjIzMDY2Mzh9fX1dfQ__&Signature=L3tgjRJ2nnUP-9qOUBuSi9cJMQL-4aaLniOegTn2z~jnIfTrfr8oJ~JMzjiOLZHCe-sVbIaSiWt3hDEOhlf1YVLj71XF~qxV~l9LpMVtIf-V0ajRkVSBxtL8da1CVEzz4GV9~8K7twCjQhHpInHJp6tCGXU7xKb3IQ2MGVzUYX1yVhI0iBtv30ww6oDCW9MKX2qgn3dFBZ~Aw4dbLu0ba4ZnFdnto8bHZVBqqq0kY9Z5CaTmm1ikvssu37XkiFPH8b8nPI6pBfS7XvAH2M3R~pKLXIGSphlfG11VZVpXxArCcDni~WPUoQpy3S5zba6R5-KkOdM5O2FN5feJouOhAA__&Key-Pair-Id=APKAI6TU7MMXM5DG6EPQ
DONT KNOW ABOUT THE LINK VALIDITY LENGHT YET!!!
Viktor
I have a webpage with an audio player - normally the code would look like this
<audio controls="controls" preload="auto">
<source src="http://the_full_path/file_name.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
I want people to be able to listen to the file using the player without being able to download the file its playing. These are the first steps I took:
was adding controlsList="nodownload" to the player
disabling right click oncontextmenu="return false"
The problem: from any browser going to menu 'view-> page source' or clicking F12/Cmd+u will show the code thus the link will be reviled.
How can I achieve my desired outcome?
'and obviously there is a way to do it'
No there's not !
#zero298 answer is perfectly right(any resaerch you will do will said the same and you see your question is commonly asked for years with same answer.
All stuff you can do can easily be override because in order to use a file client side the file is download on client(cache) in order to be use by browser in local place.
Look to how WWW work and you'll understand better i think:
web server send(upload) HTML and others files related to client who get it(download) for use.
That's root of a network and can't be otherwise. If you need anything to be shared on a network you've to send it. So you can see/use(an get) a file who is not shared nor block a file once it is send.
I tried to use google drive as a place to host videos, but whenever I try to use the video as a source, google never returns anything. (Not even a http response)
Example video player
<video>
<source
src="https://www.googleapis.com/drive/v3/files/<file_id>/?alt=media&key=<api_key>"
type="video/mp4"
/>
</video>
If I enter the url in the browser it successfully prompts me for permission to download.
Does anybody have any idea what to do?
// This works...
<video src="https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey">
// But, even better if you have access to a worker or can otherwise output the file through a script (and modify resonse headers)
async function getFile(request) {
let response = await fetch('https://www.googleapis.com/drive/v3/files/fileID?alt=media&key=apiKey', request)
response = new Response(response.body, response)
response.headers.set('Accept-Ranges', 'bytes') // Allow seeking, not necessarily enabled by default
response.headers.set('Content-Disposition', 'inline') // Disable Google's attachment (download) behaviour, display directly in browser or stick into video src instead
return response
}
addEventListener('fetch', event => {
event.respondWith(getFile(event.request))
})
Short answer: Nope
Longer answer: Oh boy. I spent quite a long time trying to figure this one out myself! I'm working on a project called DriveStream, that aims to use purely JavaScript and Apps Script to make an organised video library of a Drive account.
The project itself works fine, but implementing video streaming did not go anywhere near as planned. I tried a few different methods. One similar to yours and the other involving getting the downloadUrl property of a file and parsing the html of the download prompt page to give me a direct link to the file. I can initiate a download of that file, and that can be seen in the network requests, but there is no way to get it to stream into a video container.
The reason that doesn't work is due to the limitations of AJAX. It can return the data from a video, but there seems to be no way to funnel that data into a video container.
In the end, I've had to compensate by having the 'Play' button of each video only link to the preview video.
https://drive.google.com/file/d/fileId/preview
It's not a bad workaround, as it can play up to 1080p encodes of anything you upload.
This should work:
<video>
<source src="https://drive.google.com/uc?export=download&id=file_ID" type='video/mp4'>
</video>
Replace "file_ID" in the link with your video ID. (to find it - right click on the Google Drive video, get shareable link. The file should be shared in order to access the file.)
It plays the source video. If you would like to change quality or to use unsupported codecs it's not easy to get google drive stream/converted files as said in previous answer. (Ajax will not let you get the link because of CORS and PHP is server side and the link contains an IP address so will not be accessible directly from client side.)
It's a long answer I will try to shorten it up..
Upload your file to the drive and using the share option make it public.
Then click on the preview option, and it will open a new tab.
Look for the vertical 3 dots (top right corner) leading to a sub-menu and select open in a new window.
As soon as you get to the new window click on the vertical 3 dots (top right corner) and this time you will see an 'Embed item' option click it.
You will get the iframe code now include it your webpage or website.
Just give it a try once!!!
I hope this helps thank you!!
I might be a bit late to answer, but if anyone's interested, I have written an answer on streaming videos from Google Drive before here. There are a few ways to go about this, but in summary, you will have to do some server-side programming (can be ASP.NET, PHP etc.) if you don't want to use Google Drive's embedded player. Alternatively, if you have large videos that you want to stream that exceed the limit of 100MB, have you looked into HLS (HTTP Live Streaming)? You can create .m3u8 playlists with segments of your video (preferably less than 100MB) and that way, you can stream your videos. I hope my answer helps!
Not really sure if I can ask this so I hope its ok. I have my site where I would like to embed and play video which is stored on OneDrive cloud service. So far it sounds easy, however here's the thing: while I am actually allowed to embed it via provided embed iframe code, it can't be played unless its redirected on OneDrive site. I did my research all over the internet but it looks like dead end and no one really solved this mistery. This is what I got:
Official embed link:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
This embed is not playable from my site. after I press Play button it will redirect me to:
https://onedrive.live.com/redir.aspx?cid=5fac7d8a540d1b7a&resid=5FAC7D8A540D1B7A!141&parId=5FAC7D8A540D1B7A!140&authkey=!AM3Y3EuRuTPbKo0
then here:
https://onedrive.live.com/?cid=5fac7d8a540d1b7a&id=5FAC7D8A540D1B7A%21141&sff=1&authkey=!AM3Y3EuRuTPbKo0
and finaly here where I can play it:
https://onedrive.live.com/?authkey=%21AM3Y3EuRuTPbKo0&cid=5FAC7D8A540D1B7A&id=5FAC7D8A540D1B7A%21141&parId=5FAC7D8A540D1B7A%21140&o=OneUp
Official share link:
https://onedrive.live.com/redir?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
From this I found a way how to create direct download link by changing redir part with download:
https://onedrive.live.com/download?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
It can be put into <iframe> or <video> but it still can't be played. Also is possible to change redir to embed:
<iframe src="https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
which is pretty much same as official embed link. Then there are also strings like: &em=2 and &Embed=1 (not really sure what they stand for, but they do change redirected output) Example:
https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&ithint=video%2cmp4&em=2&Embed=1
From what I understand these listed strings can be always skipped:
?cid=5FAC7D8A540D1B7A
&authkey=AM3Y3EuRuTPbKo0
&ithint=video%2cmp4
&id=5FAC7D8A540D1B7A%21141
&parId=5FAC7D8A540D1B7A%21140
&o=OneUp
With this, I am at point where embed is not embed at all. Its like new word to "redirect me to OneDrive and play me there". Ofcourse I also tried to get help at OneDrive support, but they play stupid! and keep asking me why would I need to play my video on my site when I can play it on my drive just fine. Apparently they mocking me. I am not really tryin' to use them as my ftp server (and even if I would its not their bussines till I violate their code of conduct), I just want to play my embed video on my site like I would with Youtube, Vimeo or Dailymotion. (Well, to be honest it wouldnt bother me so much if I wouldnt already purchased 2TB storage)
I in the end I looking for "true embeding" or at least "direct link" like I found when it comes to images: http://1drv.ms/1PbOhF8 where direct link is: https://u6gkqq.dm2303.livefilestore.com/y3mtdqmTctG9LFmZ_HLl1tYgUkWTiB8xkCZ0-nOKP2_SLzkuVXtzJzhavaA8axBWlqrVezVbDjA4bO-8AJjbVSp_Yc3luKWSiMVuhvRhnvYFie_FfOEQldmztKVtOlxGrG18AIftsAbOwfXORrB8TZ1EPZYFmKQ6KfmA8Q2TWqStxE/%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA-%D0%B0%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B0-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-Tilt-Shift-2344711.jpeg?psid=1
I mean, there must be a way how to actually get direct link of stored file even if its video, right?
I even tried to insert video into my desktop MS PowerPoint 2013 and then upload it on OneDrive, get embed code, place it on my site and play it on my site. Problem is that such embed presentation can be viewed only by me and also only outside of fullscreen mode (entering into fullscreen will lead to redirect on OneDrive again). Here I attach share link + embeds:
http://1drv.ms/1Z33Xox
Embed from online OneDrive storage:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2" width="402" height="327" frameborder="0" scrolling="no"></iframe>
Embed made from embeded embed:
<iframe src='https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2&wdAr=1.7777777777777777&Embed=1' width='402px' height='327px' frameborder='0'></iframe>
Now, interesting is that for playing this presentation is used native HTML5 player. While on "share link" right-click menu is disabled (with oncontextmenu="javascript:return false;"), but while in embed mode, right-click menu is enabled however there is missing fullscreen on controls (allowfullscreen). Unfortunately video cant be saved or opened in new tab, because it will trigger downloading of some "mediahandler.ashx" file which is infact my video file with renamed extension! This is the address:
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx%5FLeyX%5Fg&z=257&usid=9992f846%2D2470%2D4a99%2Da07d%2Da26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
which will redirect here and trigger download of ashx file -
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx_LeyX_g&z=257&usid=9992f846-2470-4a99-a07d-a26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
any ideas, please ?
use video tag and in src attribute use the src value of iframe and change embed to download.Hope it will work.try it.
<video controls width="360" height="240">
<source src="https://onedrive.live.com/download?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" type='video/mp4'/>
</video>
I clicked on your Official Share Link and in the top menu there is an item for "View Original" which, after clicking, takes me to the direct download link:
https://u6eqtg.dm.files.1drv.com/y4mFkEomS8JzzREaa-IhXyseplbhCfA84Z6hcTSQXf84jFDR5_9J1PSSulKVzZqfLBs_wGqombsF45k4k3P_pZky7a1t0XOPEduQFQlhog8VshPfMzcue76CBDxU_Uz37zFAadc5gkokilYAHz5iq_FCSbgV6ago5AP8Vj5bkEb_37O5LwIooZAEQtOwa89zcAH12SNGGnW5kDX_2buZxcZbxAzOzfgPOVZHCMbkjZsr5Y/Pilobulos_Symbiosis_2005-480p.mp4?psid=1
By the way, if you have a folder full of files that require a direct download URL, I found that this answer is useful for grabbing all the direct links in a shareable folder.
Came across this which worked https://blog.omaration.com/embedding-videos-from-onedrive-into-your-blog/
Basically: take the embed src= value and use that in your HTML5 video src=, but change ?embed to ?download.