We Keep Coding

Cycle through audio using js

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

Reloading video.js player after changing source using jquery

I manage to make a script where I can change the video source without reloading the whole page, but the problem is that after the new source is loaded, the player is not and I only get a black box.
HTML:
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="850" height="400" data-setup='{"example_option":true}'>
<source id="videoMP4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
<div class="menu1">menu1</div>
<div class="menu2">menu2</div>
<div class="menu3">menu3</div>
<div class="menu4">menu4</div>
JavaScript:
$(".menu1").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu2").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
$(".menu3").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu4").click(function() {
document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
Full code and example: http://codepen.io/BeBeINC/pen/PqydVM

Use the .load() function. You should pause it to prevent the audio from keeping on playing.
var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("ELEMENT").click(function() {
video.pause()
source.setAttribute('src', 'NEW MP4');
video.load();
video.play();
});

You can do it like that
var player = videojs(document.querySelector('.video-js'));
player.src({
src: 'videoURL,
type: 'video/mp4'/*video type*/
});
player.play();

You should change the video's source using the player's API, specifically the src() method:
yourPlayer.src("http://foo.com/bar.mp4");

just do it this after you filled other attributes by JS:
$('#player')[0].load();

I Faced Similar Problem But Solved it By Changing the Poster source dynamically first then accessing the vjs poster class and changing its style, have a look at code :
$('#videoPlayer video').attr('poster', "https://dummyimage.com/hd1080");
document.querySelector("vjs-poster")[0].style.backgroundImage = "https://dummyimage.com/hd1080";

Changing video src via javascript

I have multiple videos on my website that has multiple codecs for multiple browsers.
<video id="video2" width="480" height="270">
<source src="movies/vid2.ogv" type="video/ogg">
<source src="movies/vid2.webm" type="video/webm">
<source src="movies/vid2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
I only need to show one video at a time. so i have
onClick="changevid(A)
the onClick is working fine, changing the vids. but how do i change all 3 of them?
vid1.ogv
vid1.webm
vid1.mp4
i can only change 1 by doing
var A = 'movies/vid1.mp4';
function changevid(q){
document.getElementById('video2').setAttribute('src', q);
}
Thanks

Maybe this helps:
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
function changevid(q){
E('video2').src = q;
}

what is the javascript equivalent of the audio element

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

How to enable default controls for <audio> tag via javascript?

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);