Using HTML, I can write this:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
This will first try to play horse.ogg, and if it isn't supported, then it will play horse.mp3. My question is, is it possible to do something like this using new Audio() (i.e. without touching the DOM)? For example, this is what I was thinking:
var audio = new Audio();
audio.src = "horse.ogg";
audio.load();
if (!audio.canPlay) {
audio.src = "horse.mp3";
audio.load();
}
I know of these techniques, but they assume that I know the type of file that is being sent in. Though I could do an extension check, it seems very hacky.
Related
I have three HTML5 media tags. One video and two audios. I stream them by HLS. I have the following code for the HLS setup.
The audios are good on major browsers except Safari. Audios are choppy for Safari on both macOS and iOS. I wonder if I'm missing something setting up HLS?
<video id="vid" preload="metadata" muted playsinline></video>
<audio id="human" preload="metadata" playsinline></audio>
<audio id="racoon" preload="metadata" playsinline></audio>
<script>
// HLS setup for media.
var media = document.getElementById('vid');
var mediaSrc = 'media/vid/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
} else {
// Alert only once. Don't alert for other video/audio tags.
alert("Your browser doesn't support HTTP Live Streaming.")
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('human');
var mediaSrc = 'media/human/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
<script>
// HLS setup for media.
var media = document.getElementById('racoon');
var mediaSrc = 'media/racoon/playlist.m3u8';
// First check for native browser HLS support
if (media.canPlayType('application/vnd.apple.mpegurl')) {
media.src = mediaSrc;
// If no native HLS support, check if HLS.js is supported
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(mediaSrc);
hls.attachMedia(media);
}
</script>
I had three HTML media tags, one video and two audios:
<video id="vid" preload="metadata" muted playsinline>
<source src="media/vid/playlist.m3u8">
<source src="media/vid.mp4" type="video/mp4">
<source src="media/vid.mov" type="video/mp4">
<source src="media/vid.webm" type="video/webm">
<source src="media/vid.ogv" type="video/ogg">
Your browser does not support the vedio tag.
</video>
<audio id="human" preload="metadata" playsinline>
<source src="media/human/playlist.m3u8">
<source src="media/human.m4a" type="audio/mpeg">
<source src="media/human.ogg" type="audio/ogg">
<source src="media/human.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio id="racoon" preload="metadata" playsinline>
<source src="media/racoon/playlist.m3u8">
<source src="media/racoon.m4a" type="audio/mpeg">
<source src="media/racoon.ogg" type="audio/ogg">
<source src="media/racoon.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
I was getting the media elements:
var vid = document.getElementById("vid")
var audioHuman = document.getElementById("human")
var audioRaccoon = document.getElementById("racoon")
Then, I was using a callback for video play:
// When video is playing, move slider and play audio.
vid.addEventListener("timeupdate", timeUpdate)
The callback updates the audio current time according to the video:
function timeUpdate() {
t = vid.currentTime
// Human voice isn't synced with video. It was a recording mistake.
// Compensate for the mistake.
var audioHumanOffset = 1.4
audioHuman.currentTime = t - audioHumanOffset
audioRaccoon.currentTime = t
}
The above callback was the cause of bad audio on Safari. After removing the above callback, the Safar audio is good now =)
The above callback is replaced by a totally different logic to keep video and audios in sync.
Before I ask my question I just wanted to say that I'm a noob to Javascript and to StackOverflow in general so I wanted to apologize in advance if this question is too dumb.
Anyways, I'm learning Javascript and right now I'm experimenting with currentTime, but for some reason song.currentTime is returning undefined, and I also can't set the currentTime. Here is my code:
<audio autoplay>
<source src="A.mp3" type="audio/mpeg" id="awesomeness">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
function myFunction(){
console.log("letting everything preload by waiting 2 seconds");
var song= document.getElementById("awesomeness");
console.log(song.currentTime);
song.currentTime=30;
}
</script>
Here it is in action (look at the console output): http://dancingcats.azurewebsites.net/
The currentTime property belongs to the audio element(Media)
You need is to set it to the audio element not to the source element
<audio autoplay id="awesomeness">
<source src="A.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I'm trying to get a sound looped on html 5. The sound.loop = true; works, but when the sound get finished, there's a silence between looping. How can I avoid that? Thanks a lot, here's the code:
<audio id="ruido">
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
var sound = document.getElementById("ruido");
sound.loop = true;
sound.play();
</script>
You could use a JavaScript function to loop when an 'ended' event is called.
<audio id="loopMe" controls preload>
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
</audio>
document.getElementById('loopMe').addEventListener('ended', function(){
this.currentTime = 0;
this.play();
}, false);
Or better yet try the SeamlessLoop library, Reproduce seamless/gapless audio loops on HTML5/JavaScript without specific browser Audio APIs.
I am new on HTML5, What I want to do is get the audio duration time when I click the pause button
here is my code
<audio controls="" id="audio">
<source src="assets/record_file/abc.mp3" type="audio/ogg">
<source src="assets/record_file/abc.mp3" type="audio/mpeg">
Your browser does not support the audio element. Please try other latest browser
</audio>
any idea how to do it ?
thanks
document.getElementById('audio').pause = function() {
var currentTime = document.getElementById('audio').currentTime;
var duration = document.getElementById('audio').duration;
alert(currentTime);
};
Please check HTML Audio and Video DOM Reference, describe all methods, properties and events.
I am trying to insert the same song into 2 different sources on my audio player using javascripts 'getElementByID'.
HTML:
<audio id="audio">
<source id="ogg" src="song1.ogg" type="audio/ogg">
<source id="mp3" src="song2.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
JavaScript:
function songOne(){
document.getElementById('ogg').src="../audio/pt/lllg/Panda's Thumb.ogg";
document.getElementById('mp3').src="../audio/pt/lllg/Panda's Thumb.mp3";
document.getElementById('songName').innerHTML="Panda's Thumb";
audio.play();
}
As you can see, when the function runs, it places the .ogg file into the id="ogg" and the .mp3 into the id=".mp3". Though, when I inspect the element the source has changed but the song will not play.
I can get it to work with only one source:
<audio id="audio" src=""></audio>
But then it will only play on browsers that support mp3 or ogg and the others miss out.
What am i doing wrong?
I don't know much about HTML5 Audio, but try this:
After you change the src attr, issue a audio.load(); command
Check this article: http://html5doctor.com/native-audio-in-the-browser/