I cannot figure out how to incorporate ogg files into a playlist for an HTML5 tag. Right now I read files from a directory JSON object that formats as follows:
var playlist = [{"url":"mp3\/122911.mp3","title":"122911"},
{"url":"mp3\/100909.mp3","title":"100909"},{"url":"mp3\/011110.mp3","title":"011110"},
{"url":"mp3\/061207C.mp3","title":"061207C"},{"url":"mp3\/110309.mp3","title":"110309"},
{"url":"mp3\/120409.mp3","title":"120409"},{"url":"mp3\/031608.mp3","title":"031608"},
{"url":"mp3\/100609C.mp3","title":"100609C"},{"url":"mp3\/120408.mp3","title":"120408"},
{"url":"mp3\/012908.mp3","title":"012908"},{"url":"mp3\/032107.mp3","title":"032107"}]
that works wonders and loading the ogg files into that object is not the issue. I just need to know how to tell firefox that the ogg files are there. Is there a parameter I'm missing in order to do that along with 'url' and 'title' in the JSON? I know it can go right in the audio tag if I'm just creating everything statically, but I'm not. The audio tag is simply:
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
and it works just fine with the mp3s in chrome and safari so far. I know I'm missing something simple. I have the ogg files, just confused about the parameters in the playlist I suppose. Thanks!
How this is working?
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
There is no source. Are you dynamically adding <source> to the <audio>?
Let me tell how it works:
You can specify multiple <source for the <audio>. Browsers will look top to bottom in the <source>s and try to play the first one it supports. So, if you write this way:
<audio class="aud" autoplay>
<source src="music.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
This will be sufficient. Browses, that support mp3, will use the first source. If the browser, like firefox, that does not support mp3 will discard this and look next. It will find .ogg next and will play that one.
You can see more here:
http://www.w3schools.com/html/html5_audio.asp
Related
I need to use a .wav format audio in my HTML code. I used the following code and test it on chrome.
<audio controls controlsList="nodownload"><source src="sample.wav" type="audio/wav"></audio>
But it's showing an empty audio file on my webpage over and over again and my chrome browser telling me to download that .wav file. How to solve that problem?
Your snippet works well, you can test it here (I made a copy and paste from your post)
http://87.106.127.248/wav.html
Use only well known combinations of sample rate/bit depth, i.e. 44.100/16 bit with browsers
For streaming purposes on the web (like in an audio tag) you should create copies of your audio file in .mp3 and .ogg format and use these for your website.
Then a typical audio tag which could be handled by practically all modern browsers would look like this:
<audio>
<source src="path/to/yourfile.ogg" type="audio/ogg">
<source src="path/to/yourfile.mp3" type="audio/mpeg">
</audio>
I want an mp3 file to play automatically when the page loads, but that doesn't happen.. the file only plays when I press the play button.. how do I get it to play automatically?
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
It works with another browser, but is there any way to make autoplay work in Chrome?
Have you tried other browsers?
This should help
https://www.w3schools.com/tags/att_audio_autoplay.asp
Not all browsers support this feature because the code you have written is correct. However, there is another javascript trick that can be used I will suggest you try to use that.
Autoplay mode should be added to the opening tag of your code, this is widely supported by Chrome and FF
You only need to change that mpeg to mp3. Just like this:
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mp3">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
it will work
There are two things that could be wrong.
1) your browser doesn’t support it
2) your file format “mpeg” should be “mp3”
The WAV format html5 does not work in the single audio tag. I have not tried to convert it to mp3 for what I have to do for it. I did not try to translate it to ogg.
<audio controls>
<source src="horse.ogg" type="audio/">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
To play a wav file you would use the audio/wav type.
So, adding a tag like this:
<source src="horse.wav" type="audio/wav">
However, .wav files don't work natively in IE.
See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you tried the above tag, and it isn't working in a non-IE browser, you may also have to set a mime-type on your web server to stream it.
I encountered a problem with iOS 11 not being able to stream audio files from a HTML audio element. The file is an aac file hosted externally.
This is the code example:
<audio controls>
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mp4">
</audio>
I solved this by changing the type to "audio/mpeg", but wanted to add this to stackoverflow to prevent other people from having to look for the bug for ages.
You can open this link in iOS to view what goes wrong.
https://embed.plnkr.co/Z0fE5t5ycS1syKrKf1Nf/?show=preview
So the fix turned out to be to change the type to "audio/mpeg". Although I still have no clue what goes wrong.
Fixed code:
<audio controls>
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mpeg">
</audio>
And again the link with the initial bug and the fix:
https://embed.plnkr.co/Z0fE5t5ycS1syKrKf1Nf/?show=preview
I hope this was a worthy addition to stackoverflow as I'm quite new.
I have a 100% valid html5 document, on every other browser on every OS, there are no problems, but on IE9, I always just get the black rectangle with a red cross on it instead of audio player. I thought that it might be conflicting somehow with the activeX.
Thanks.
<audio controls="controls">
<source src="/files/NRUPPLYSNINGEN_XTRA.mp3" type="audio/mp3">
<source src="/files/NRUPPLYSNINGEN_XTRA.wav" type="audio/wav">
<source src="/files/NRUPPLYSNINGEN_XTRA.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
Maybe a silly question, but could it be that the path to the audio files are not correct?
Chrome renders the audio player nicely even if the audio files cannot be found. However, IE9 does not seem to do that.
If I replace the audio file with a working one then the cross goes away and everything works fine.
<audio controls="controls">
<source src="http://open.is/jQueryMusicPlayer/betty.mp3" type="audio/mp3">
Your browser does not support this audio format.
</audio>
Try it: http://jsfiddle.net/PFTaN/