Assume the following audio element
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Now I would like to do the same with javascript
var audio new Audio( 'horse.mp3' ) ;
So the question is how I could also provide the 'ogg' so the 'audio' object can determine which it can play ?
The Javascript class doesn't support fallbacks, so you have two options:
Check to see if the client can play a type of codec and create the
Audio depending on support.
Create DOM elements and inject them to the page.
To check to see if there's support for an encoding;
var audio = new Audio();
if (audio.canPlayType("audio/ogg; codecs=vorbis")) {
audio = new Audio("file.ogg");
} else ...
DOM injection;
var el = document.createElement('audio');
el.innerHTML = '<source src="file.ogg" type="audio/ogg" /><source src="file.mp3" type="audio/mp3" />';
document.body.appendChild(el);
The equivalent of any tag in JS in createElement and setAttribute.
var audio = document.createElement('audio');
audio.setAttribute('controls', 'controls');
var ogg = document.createElement('source');
ogg.setAttribute('src', 'horse.ogg');
ogg.setAttribute('type', 'audio/ogg');
var mp3 = document.createElement('source');
mp3.setAttribute('src', 'horse.mp3');
mp3.setAttribute('type', 'audio/mp3');
audio.appendChild(ogg);
audio.appendChild(mp3);
Use audio|video.canPlayType(type)
Example :
var canPlayMpeg = audio.canPlayType("audio/mpeg");
You can also use a lib like buzz.js http://buzz.jaysalvat.com
Related
This script works: but does anyone know how I can alter the javascript so the 'var aud' on //line1 is the current audio playing -> ( i.e whichever of my 7 audio clips happens to be playing at that point), something about 'this'? Thanks
<script>
var aud = document.getElementById("myAudio"); //line1
aud.onplay = function() {
var aud1 = document.getElementById("myAudio1");
aud1.currentTime = 0;
aud1.pause();
};
</script>
var audios = document.getElementsByTagName('audio');
console.log(audios)
for(var i in audios)
if(audios.hasOwnProperty(i)){
var t = audios[i];
t.onplay = function(){
alert(t.innerHTML)
}
}
<audio controls="">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><audio controls="">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><audio controls="">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Add an event listener for all your audio elements, and then with this code it should console.log whichever one triggered the event. If that works then do whatever you want to do with the audio element which triggered the event.
var aud = document.getElementsByTagName("audio");
aud.onplaying = function() {
console.log(this);
var playingAudio = this;
playingAudio.pause();
}
<script type="text/javascript">
var aud = document.getElementById("myAudio"); //line1
var audio = []
for (var i = 1; i <= 7; i++){
aud.onplay = function() {
var audio[i] = document.getElementById("myAudio"+i);
audio[i].currentTime = 0;
audio[i].pause();
};
}
</script>
This should work. share comment if not!
Accessing an HTML5 audio element (a .ogg file) with JavaScript in Chrome. The file does play properly, yet somehow it will not recognize the duration.
I just cribbed this code: https://www.w3schools.com/jsref/prop_audio_duration.asp (I know w3schools isn't great, but it seems like something else is the problem...)
var x = document.getElementById("testTone").duration;
console.log("duration:"+x); // duration:NaN
var y = document.getElementById("testTone");
y.play(); // works!
the element...
<audio controls id="testTone">
<source src="autoharp/tone0.ogg" type="audio/ogg">
</audio>
Add preload="metadata" to your tag to have it request the metadata for your audio object:
<audio controls id="testTone" preload="metadata">
<source src="autoharp/tone0.ogg" type="audio/ogg">
</audio>
In your code, attach an event handler, to set the duration when the metadata has been loaded:
var au = document.getElementById("testTone");
au.onloadedmetadata = function() {
console.log(au.duration)
};
Beside #FrankerZ's solution, you could also do the following:
<audio controls id="testTone">
<source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
</audio>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("testTone").duration;
console.log("duration:" + x); // duration:NaN
var y = document.getElementById("testTone");
y.play(); // works!
}
</script>
you can try this..hope it will work i used this in 'timeupdate' event as i was getting same NaN error.
var x = document.getElementById("testTone").duration;
if(x){
console.log("duration:"+x);
}
I'm trying to use a button to change the audio track to 1 of 2 being played in the browser, however, the method I found switches to the second track but doesn't change the audio played afterwards, it only restarts the second track. Here's my code:
function loadSong(){
var player=document.getElementById('player');
var source1=document.getElementById('player');
var source2=document.getElementById('player');
source1.src='/audio/mac+.mp3';
source2.src='/audio/mac-slowed.mp3';
player.load(); //just start buffering (preload)
player.play(); //start playing
}
HTML
<audio id="player" autoplay="autoplay" preload="auto" loop="loop">
<source id="source1" src="/audio/mac+.mp3" type="audio/mpeg">
<source id="source2" src="" type="audio/mpeg">
</audio>
<button onclick='loadSong()'>Switch the Music!</button>
Based on the information you provided in your original inquiry, this is most likely the best fit for you. Attached is a working JSFiddle for you review. You will need to update the src files with your own locally stored files.
HTML:
<audio id="source1" autoplay="autoplay" loop="loop" src='http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3'></audio>
<audio id="source2" loop="loop" src='http://www.stephaniequinn.com/Music/Pachelbel%20-%20Canon%20in%20D%20Major.mp3'></audio>
<button id="player">Switch the music to track # 2</button>
Javascript:
var player = document.getElementById('player');
var source1 = document.getElementById('source1');
var source2 = document.getElementById('source2');
player.onclick = function() {
curTrack = this.innerHTML.replace(/Switch the music to track # /, "");
if (curTrack == "1") {
nextTrack = "2";
source1.play();
source2.pause();
source2.currentTime = 0;
} else {
nextTrack = "1";
source2.play();
source1.pause();
source1.currentTime = 0;
}
this.innerHTML = "Switch the music to track # " + nextTrack;
}
You are overwriting the #player element look at your code you are saving the same selector to source1 and source 2 so change the selector of source one to source1 and source2
How do I use webkit-playsinline in javascript instead of in html5 video tag? I want to use it just like using video tag control/autoplay attribute in javascript or if you guys have any other method that is working? I'm working on a PhoneGap iOS app that stream video.
Below is some approach that I have tried but none are working:
videoPlayer.WebKitPlaysInline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "WebKitPlaysInline";
videoPlayer.webkit-playsinline = "webkit-playsinline";
videoPlayer.WebKitPlaysInline = "true";
videoPlayer.WebKitPlaysInline = true;
videoPlayer.webkit-playsinline = "true";
videoPlayer.webkit-playsinline = true;
My current code(js):
function loadPlayer() {
var videoPlayer = document.createElement('video');
videoPlayer.controls = "controls";
videoPlayer.autoplay = "autoplay";
videoPlayer.WebKitPlaysInline = true;
document.getElementById("vidPlayer").appendChild(videoPlayer);
nextChannel();
}
My current code(html):
<body onload="loadPlayer(document.getElementById('vidPlayer'));"><!-- load js function -->
<li><span class="ind_player"><div id="vidPlayer"></div></span></li><!-- video element creat here -->
Any helps are much appreciate. Thanks.
You can do this without jQuery:
var videoElement = document.createElement( 'video' );
videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');
You have to activate this functionality in your iOs application's WebView :
webview.allowsInlineMediaPlayback = true;
You can check this post for more details:
HTML5 inline video on iPhone vs iPad/Browser
You need to attach it to the video element and set it as video's attribute
such as :
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
so you could do (with jQuery) :
$('video').attr('webkit-playsinline', '');
This is how I can include a audio file via html:
<audio controls>
<source src="audio/was_ist_ist.ogg" />
</audio>
Now I want to do the same only using javascript. I have this so far:
var audioElement = new Audio("audio/was_ist_ist.ogg");
How do I enable the default controls here?
var au = new Audio("http://...ogg");
au.controls = true;
document.body.appendChild(au);
example fiddle: http://jsfiddle.net/QKUgX/
var audio= new Audio(url);
audio.attr('controls',true).appendTo(selector);