html5 audio mp3 path not working on IE9 - html

I'm a webmaster and I'm managing multiple website in a single server. I used "virtualhost" to dispatch each website url to the right folder under arn.ae.
So the main url is arn.ae which is the root of my server and radioshoma934.ae is a sub website pointing to a subdirectory called shoma.
In IE9, I discovered that when I use the subwebsite url to point to my audio like this:
<audio controls="controls">
<source src="http://radioshoma934.ae/vincent.mp3" type="audio/mp3" />
</audio>
--->The audio is not loaded but if I'm using a full path like this :
<audio controls="controls">
<source src="http://arn.ae/shoma/vincent.mp3" type="audio/mp3" />
</audio>
---> It works.
Any body know what configuration is needed in my server to make my subwebsite url working?

It is because src="http://arn.ae/shoma/vincent.mp3" is the root address of your server It is the exact location of the file. The First one src="http://radioshoma934.ae/vincent.mp3" is pointing to arn.ae/shoma/. The src tag requires the direct link to the media on the server. and the root url arn.ae/shoma/* is the root path.
you can try doing src="/shoma/vincent.mp3" a relative link.
Hope that helps

Related

how can i add my music player for my website

i need with start button
I wrote it correctly but it doesn't work on the site.
<audio autoplay> <source src="file way" type="audio/mpeg"> </audio>
I encountered a very similar problem playing video. The folder path I provided as the "src" to the video file actually existed, but was outside the document root of the web application. Thus it was invisible and inaccessible.
When I changed the "src" to a folder within the document root, the webapp worked as expected.
Be sure src="path" points to a folder that exists somewhere within the document root of your webapp.
DocRoot is /Users/horace/Sites/VideoMash
Video files are in /Users/horace/Sites/VideoMash/videos
❌ <video src="/Users/horace/Sites/VideoMash/videos/xyz.mp4" ...>
✅ <video src="videos/xyz.mp4" ...>
Hopefully this addresses your problem.

Please explain why my mp3 file won't play

I'm watching a Youtube video to learn HTML and CSS.
https://www.youtube.com/watch?v=cyuzt1Dp8X8&t=5566s
I downloaded an mp3 file to my computer, but when I run my code, the audio file doesn't play. In my HTML code, I used the name of the audio file rather than the path. I know the name of the mp3 file is correct. However, by using the path rather than the file name, I have been able to play the audio in my browser. Again, the first code will NOT play the audio file, but the second code will play the audio file.
<audio controls>
<source src="CouldItBeKP.mp3" />
</audio>
<audio controls>
<source src="C:\Users\james\Downloads\CouldItBeKP.mp3" />
</audio>
Also, the author of the Youtube video believes the location of the audio file matters. For example, the audio file won't play if I move the mp3 file from Desktop to Downloads or vice versa. The code is below.
<audio controls>
<source src="CouldItBeKP.mp3" />
</audio>
Please help! Thanks.
When you do not specify the full path, most browsers will assume that the file is in the same folder. So if your code was in ~\Documents, but the audio was in ~\Downloads, it would not play. If they were both in ~\Documents, it would play.
You need the path to be correct, without the path it greys out. Put it in your main directory and try ./CouldItBeKP.mp3
it seems like your audio files are on the downloads folder, but I'm not sure where your code is.
I would suggest you move your audio files and your codes to the same directory.
For example, if my HTML file is in
C:\Users\james\project
My music files also should be also in C:\Users\james\project or somewhere near this folder. Eg: C:\Users\james\project\music
Now, let's assume, my music files are inside C:\Users\james\project\music while my HTML file is in C:\Users\james\project
So, my code for playing the music would be like this.
<audio controls>
<source src="music/CouldItBeKP.mp3" />
</audio>
Or
<audio controls>
<source src="./music/CouldItBeKP.mp3" />
</audio>
./ means to start from the current folder. In our case, which is C:\Users\james\project
Then your second code will also play the audio.

How to play google drive mp3 file using html audio tag?

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.

html 5 audio tag in iOS/iphone 6 no longer working in a password-protected directory

I have a simple html 5 audio tag (below) on a page in a password protected directory.
The directory is protected by HTTP Basic authentication.
It was working fine on iOS7, on Safari. Now when I click on the Play button, nothing happens.
On other directories that are not password protected, it still works fine.
<audio controls>
<source src="audio/01-10r.mp3" type="audio/mp3">
<source src="audio/01-10r.ogg" type="audio/ogg">
<source src="audio/01-10r.wav" type="audio/wav">
</audio>
OK, just a hunch here but if its working for you in other directories I would say check your source from which your loading the file. If it's working in one directory and not the other I'd say its not loading the file correctly using the "src" source you have set. But if you want to post more details about your structure I don't mind looking over it further.
According to W3 here's the browsers it supports

HTML5 Video On Local Server

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.