I am currently modifying a web app for iPad. I am trying to attach an audio soundtrack to the image slideshow. I currently have the audio files playing when the user hits the slideshow navigation controls but I can't seem to figure out how to make the audio play when the slides have automatically started.
When the nextBg() function in my main.js file moves from the current background image to the next I want it to play the next audio file in the list. The play function is: playAudio(). How do I do this?
The codes and files I am currently working with are:
function nextBg() {
if(bgRunning) return false;
clearInterval(bgTimer);
if(!$('#bgImages li.active').is(':last-child'))
$('#bgImages li.active').removeClass('active').next().addClass('active');
else
$('#bgImages li.active').removeClass('active').parent().find('li:first-child').addClass('active');
runBg();
}
function playAudio(path){
if(audioSupport){
var isPlaying = !myAudio.paused;
var canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
var canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
if(canPlayMp3)
myAudio.src = path+'.mp3';
else if(canPlayOgg)
myAudio.src = path+'.ogg';
myAudio.removeEventListener('ended', arguments.callee, false);
myAudio.addEventListener('ended', audioAddEndedListener , false);
if(autoPlay || isPlaying)
{
myAudio.play();
$('#audioControls .pause').css('display','block');
$('#audioControls .play').css('display','none');
}else{
$('#audioControls .play').css('display','block');
$('#audioControls .pause').css('display','none');
}
}
}
function audioAddEndedListener()
{
if(loop){
this.currentTime = 0;
this.play();
}else{
this.removeEventListener('ended', arguments.callee, false);
setNextAudio();
path = $('#audioList li.active').html();
playAudio(path);
myAudio.addEventListener('ended', audioAddEndedListener, false);
}
}
http://platinum.megatron.co.nz/main.js
http://platinum.megatron.co.nz/kitchen/video.html
Just call your playAudio() method inside the playBg() method after you swap the image.
Related
I'm building audio player with jQuery. And I managed to do almost everything that I wanted, but I can not make song to repeat when I click on repeat button. It should repeat if I click on repeat button and if it is enabled, when I click again to disable it.
I init audio with
music = new Audio()
I tried to use some thing like:
$('.rep').on('click', function(){
music.prop('loop');
})
but I can not get it work.
any advice, comment or tutorial would be helpful because I am looking to learn, not to copy/paste.
Thanks
U can add eventListener like this.. :
$('.rep').click(function(){
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
});
or just edit an attr loop like this CodePen :
myAudio = document.getElementById("myAudio");
$('.rep').click(function(){
if(myAudio.loop != true){
myAudio.loop = true;
myAudio.play();
} else {
myAudio.loop = false;
myAudio.currentTime = 0;
myAudio.pause();
}
});
Hope it helps.
I am new to Javascript... like super new :X and i am writing my very first script to try and automate video episodes of my favorite anime because the videos on the site don't have a autoplay feature after you click the link. I read about Video and Var = 'My video' to try and figure out how to tell the script, when page loads video .autoplay = true...but i just get to dead ends. here is where i am at:
var urlsToLoad = [
'http://Site1/Ep1',
'http://Site1/Ep2',
'http://Site1/Ep3',
'http://Site1/Ep4'
];
if (document.readyState == "complete") {
FireTimer ();
}
window.addEventListener ("hashchange", FireTimer, false);
function FireTimer () {
setTimeout (GotoNextURL, 5000); // 5000 == 5 seconds
}
function GotoNextURL () {
var numUrls = urlsToLoad.length;
var urlIdx = urlsToLoad.indexOf (location.href);
urlIdx++;
if (urlIdx >= numUrls) urlIdx = 0;
Once the first video link starts 'Site1/EP1', i have this going:
function myFunction() {
var vid = document.getElementById("925664"); <--Ctrl+F 'Videoid' from Source
vid.autoplay = true;
vid.load();
}
but it just stays died like 'click play to start' ..
I can really use help here PLZZZ and thank you.
Something like this:
<!-- HTML Page -->
<video id="925664"></video>
// Javascript
function myFunction() {
var vid = document.getElementById("925664"); // <--Ctrl+F 'Videoid' from Source
vid.src = "path/to/file.mp4";
//vid.autoplay = true; // not really anything that's useful
vid.load();
vid.play();
}
Warning: Most mobile devices don't allow media files to play via code and require human interaction (click/touch) in order to start playback. However, on desktops this isn't a problem.
Try using the play() method instead.
function myFunction() {
var vid = document.getElementById("925664");
vid.play();
}
I have created a site with image thumbnails of people I have photographed. When a visitor clicks on one of the thumbnails the full image is revealed using jQuery, and an audio introduction plays. I have a different audio introduction for each thumbnail/image combination - 15 at present with more being added daily.
I would like to ensure that if a visitor clicks on another thumbnail before the previous audio file has completed, that the previous audio file is stopped/paused to allow the new audio file to be played - thereby ensuring two or more tracks do not play simultaneously.
I am currently using the following snippet of code, wrapped in an anonymous function, to play each audio file individually when the appropriate thumbnail is clicked - so this snippet is duplicated for each audio file, but don't know how to ensure they do not play over one another.
$(".bridget-strevens").click(function(){
var audio = $('#bridget-strevens-intro')[0];
if (audio.paused){
audio.play();
} else {
audio.pause();
}
});
Any help you could give me would be very grateful, as I am just starting to learn jQuery, and don't have the knowledge to come up with a workable solution.
Thanks in advance for your help!
Add a .audio class to all your audio elements and loop through all of them when an audio is clicked.
$(".bridget-strevens").click(function () {
$('.audio').each(function (index, value) {
if (!value.paused) {
value.pause();
}
});
var audio = $('#bridget-strevens-intro')[0];
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
If that seems too heavy for you then simply add the audio element in a global variable such as:
var currentAudio;
Then when a new audio is clicked, simply pause that one, play the new one and update the currentAudio variable with the new element currently being played.
var currentAudio = null;
$(".bridget-strevens").click(function () {
if(currentAudio != null && !currentAudio.paused){
currentAudio.pause();
}
var audio = $('#bridget-strevens-intro')[0];
if (audio.paused) {
audio.play();
currentAudio = audio;
} else {
audio.pause();
}
});
Update:
Thanks for the prompt responses! Grimbode, I've tried what you
suggest, and that seems to work. However is there the ability to stop
and reset rather than just pause - so if they clicked on 1 then [2]
before 1 finished, then clicked 1 again, that 1 would start from
the beginning again rather than the point at which it was paused? And
is there any way of check the state 'globally', and then add code for
each individual audio file - just to keep the amount of code and
duplication down? Thanks again!! –
Yes. Play audio and restart it onclick explains in detail how to do this. The final result would look something like this:
var currentAudio = null;
$(".bridget-strevens").click(function () {
if(currentAudio != null && !currentAudio.paused && currentAudio != this){
currentAudio.pause();
//Here we reset the audio and put it back to 0.
currentAudio.currentTime = 0;
}
var audio = $('#bridget-strevens-intro')[0];
if (audio.paused) {
audio.play();
currentAudio = audio;
} else {
audio.pause();
}
});
You can't really optimize the code much more. You're going to have apply the click event on every audio element. You're going to have to keep the current playing audio element memorized so you don't have to loop through all the audio files.
If you really want to take this further you could create a library to handle everything. Here is an example:
(function(){
var _ = function(o){
if(!(this instanceof _)){
return new _(o);
}
if(typeof o === 'undefined'){
o = {};
}
//here you set attributes
this.targets = o.targets || {};
this.current = o.current || null;
};
//create fn shortcut
_.fn = _.prototype = {
init: function(){}
}
//Here you create your methods
_.fn.load = function(){
//here you load all the files in your this.targets.. meaning you load the source
//OR you add the click events on them.
//returning this for chainability
return this
};
//exporting
window._ = _;
})();
//here is how you use it
_({
targets: $('.audio')
}).load();
I have a code that works great for starting and pausing audio html5 player and it looks like this
i want to insert that the img of the player will too change on every click and what i wrote is this
<script>
function aud_play_pause4() {
var myAudio = document.getElementById("myAudio4");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>
<script>
function aud_play_pause5() {
var myAudio = document.getElementById("myAudio5");
if (myAudio.paused && document.getElementById("btn").src == "btnpause.png") {
myAudio.play();
document.getElementById("btn").src = "btn.png";
} else {
myAudio.pause();
document.getElementById("btn").src = "btnpause.png";
}
}
</script>
this is the fifth track ID
im checking the log but their is nothing wrong with the code
but what I saw that it changes the first track id and not the fifth
192.185.121.126/~vagabond/coral/ this is the link
Your IDs must be specific for each button (img)... you have "btn" as the ID for all your buttons (img).
So, when you call document.getElementById("btn") it is getting the first img (button).
I am trying to play list of video files stored in a folder one by one but if any of the file is missing or deleted the program will stop but i want it jump to the next video and continue its execution is there any way to catch this error and jump to the next one?
function advanceVideo()
{
video_count++;
if (video_count > num_files) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".ogg");
video.load();
video.play();
}
I am using the above function for accessing the video file in the folder.
Make use of the various events the <video /> element offers
// function to load the next video (without .play())
function advanceVideo() {
video_count = (video_count + 1) % num_files;
this.setAttribute("src", "video/video" + video_count + ".ogg");
this.load();
}
// if the current video has reached the end, load the next
videoPlayer.addEventListener("ended", advanceVideo);
// if the browser fetched enough data to play the video start playing
videoPlayer.addEventListener("canplay", function() {
this.play();
});
// if an error occured load the next video
videoPlayer.addEventListener("error", advanceVideo);
Update
This should do what you've requested in your comment
var num_files = 2,
playedVideos = 0;
// load next video
function advanceVideo() {
// current video id or -1 if not found
var curId = parseInt((/video(\d+)\.ogg$/.exec(this.src) || [, -1])[1], 10);
// reset if all videos have been played
if (playedVideos == num_files) {
playedVideos = 0;
curId = -1;
}
this.src = "video/video" + (curId + 1) + ".ogg";
this.load();
}
// if the current video has reached the end, load the next
videoPlayer.addEventListener("ended", function() {
playedVideos++;
advanceVideo();
});
// if the browser fetched enough data to play the video start playing
videoPlayer.addEventListener("canplay", function() {
this.play();
});
// if an error occured load the next video
videoPlayer.addEventListener("error", advanceVideo);
If there are less videos to play than num_files indicates, this will end in an "infinite loop" as it will try all videos until curId reaches the value Infinity!
Try using try-catch block:
function advanceVideo()
{
video_count++;
if (video_count > num_files) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".ogg");
try {
video.load();
video.play();
} catch (e) { }
}