Im trying to play mp3 files from an external hard drive connected to raspberry pi on web browser (webserver is the raspberry pi). My code is so far simply to test.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="kyon.mp3" type="audio/mp3">
</audio>
<p> <audio controls>
<source src="shakira.mp3" type="audio/mp3">
</audio>
<p> <audio controls>
<source src="/mnt/SEAGATE_BACKUP_1/MP3/Carly_I_Really_Like_You.mp3" type="audio/mp3">
</audio>
</body>
</html>
I can play first two mp3 but cannot play the third, I have checked permissions which seem fine.
Any idea?
I had the same problem with the python gTTS framework, and get_urls() gave me 2 translate.google.com URLs. My sound controls were also grayed out, and when I copy and pasted the URL into another tab, it gave me a 404 error. I pressed "Reload" and it worked, when I reloaded my own site that used get_urls(), the controls became normal. In short, if you use Chrome, try this:
Open it in an actual tab, and reload the page.
Reload your own server.
Hopefully, it works!
SHacker (left my login credentials on my Raspberry Pi)
Related
I am trying to get a live stream from an online radio link. When I run the URL in the browser, I get it playing but if I insert in a HTML audio player then it changes the URL from HTTP to HTTPS and does not play it.
here is an example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio controls>
<source src="http://80sbeats.cyberbeats.net:8000/stream?icy=http" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Any idea why it does not play it?
I want to play a video with html5 video tag from a network server.
I'm also make the test with an image, but I got, with Google Chrome, the error "Not allowed to load local resource".
I've already searched and this happens by security reasons of the new web browses.
For the video I'm using the basic html. If I play the video from my computer, like, it work well (obviously)
<video width="320" height="240" controls>
<source src="videos/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
But when I change the source to: 'file:///fileof1/FILESRV/videos/movie.mp4', nothing happens.
Anyone with a solution?
My aim is to play the mp3 file from the google drive. I am using the plugin MediaElement js. The reference I got is https://www.portalzine.de/dev/html5/hosting-mp3-files-on-google-drive-html5-audio-player/
This is working in chrome, Mozilla firefox but not in IE-11, safari and opera. I want this to be play in all browsers. Please give me the suggestions....
1. URL for the audio file (anyone can view)
https://drive.google.com/file/d/1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-/view?usp=sharing
2. Extract the id from URL
1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
3. URL for playing the audio file
https://docs.google.com/uc?export=download&id={id}
example:
https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
4. URL for downloading the audio file
https://drive.google.com/uc?authuser=0&id={id}&export=download
example:
https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-&export=download
5. HTML for playing audio:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id={id}">
</audio>
example:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-">
</audio>
6. HTML for downloading audio:
<a href="https://drive.google.com/uc?authuser=0&id={id}&export=download"/>Download
example:
<a href="https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGyO9S-&export=download"/>Download
In another thread on another page someone wrote the only solution that has worked for me:
If you share an MP3 by link, you obtain a link like this
https://drive.google.com/file/d/XXXXXXXXXXXXXXXXXX/view?usp=sharing
where XXXXXXXXXXXXXXXXXX is the ID of your MP3 file. Then you can obtain a direct link to this audio by
http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX
In particular you can use
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
<p>Your browser does not support HTML5 audio :(</p>
</audio>
The first link is the one you normally get, the other link is what you want to use with
Try to think of this as HTML code:
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
</audio>
Make sure you convert that link right and it will work!
I'm using Direct Link Creator plugin of Google Drive and get the link easily. Here's an example.
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=0B_ETxiqrp0SzbF9VQ3JCS2hnSlU">
</audio>
<video controls="controls">
<source src="https://drive.google.com/uc?export=download&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs" type='video/mp4' />
</video>
I was trying to accomplish this inside the SSML audio tag for Actions on Google. None of the above steps seemed to work. I finally found a solution.
1) Get the file ID from the sharing link
https://drive.google.com/file/d/your_file_id/view?usp=sharing
2) Construct the direct link
http://docs.google.com/uc?export=open&id=your_file_id
3) Paste the direct link into a web browser and hit enter
4) Copy the resulting URL after you have been redirected by your browser
Note: This will be a much longer URL that looks something like this:
https://doc-XX-XX-docs.googleusercontent.com/docs/securesc/XXXXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXXXXXX/000000000000000/0000000000000000000000/*/your_file_id?e=open
Using this final URL is the only way I could get my uploaded sound files to work with Actions on Google.
How to play local audio file (c:\classical\chopin.wav - no file selection) in Google Chrome using HTML5 coding?
I'm not on a Windows machine right now. But you should try
<audio src="file:///C:/classical/chopin.wav" controls ></audio>
Of course, this only works, if the webpage is viewed locally on your machine.
Keep your audio file in html folder and this code will work.
<audio controls>
<source src="chopin.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
I have a company training video loaded onto a local server. I'm using HTML5's video playback to view these videos. This server can not access the web, but I have loaded apache and port 8080 is open to all machines on the same network.
The files sit in /var/www/html/Videos/An_Industry_Overview
The html file is test2.htm
The video files sit in the same directory.
My current code is as follows
<html>
<body>
<div style="text-align:center">
<video id="video1" width="720" controls>
<source src="overview.mp4" type="video/mp4">
<source src="overview.ogv" type="video/ogv">
<source src="overview.webm" type="video/webm">
</video>
</div>
</body>
</html>
The player itself loads, and it acts like it's loading the video (loading circle going around and around), but that's all it does. I also tried inserting the full http url and also subbing out the server name with the localhost ip 127.0.0.1 but I get the same results. Why can't I get it to load?
EDIT:
Default .htaccess and httpd.conf files. Added video file types to /etc/mime.types. Tested in both Chrome and Firefox.
Check the case on the src, and change it to a fully qualified URL.