I have a HTML page with an image in it.
When I roll-over the image with my mouse it plays an audio file.
I have 4 different audio files, and each time I roll-over the image I need it to play the next audio-file in the sequence.
I've got it playing one audio-file back ok, but how do I get it calling the next audio-file in the queue?
Its likely you just need to make a javascript function on the webpage to handle this. Without seeing your codes I can't really give you a good example. Here is what I would do. Within a a script tag or head javascript:
var current = 0;
var musicList = ["file1.wav", "file2.wav" , ...];
function playSound()
{
// Code to play audio file
// you don't need to bother with <audio> elements.
// HTML 5 lets you access audio API directly
// buffers automatically when created
var snd = new Audio(musicList[current]);
snd.play();
// code to increment and current counter (depending on musicList size)
current++;
current = current % musicList.length;
}
Within your HTML, you can just rely on javascript to do the work by using the onmouseover or onmouseout tag.
<img onmouseover="playSound();" src="smiley.gif" alt="Smiley">
Related
I'm supposed to have 5 animal images on the site, and whenever I hover over an animal, their characteristic sound plays. Is there a more efficient way to do this rather than using switch case?
This is what I have so far (works only for 1 animal):
HTML:
<img src="img/piggy.png" onmouseover="F1(this)">
JS:
function F1(img) {
var audio = document.getElementById("audio");
audio.play();
}
I think this is a really solid base. If it were me I would do almost exactly what you are doing but set up an array with the list of available sound bites. Then, onmouseover pass in a number (0-5) and use that as the selector to choose which soundbyte plays.
var sounds = ["sound1", "sound2", "sound3", "sound4", "sound5"];
function playAudio(track) {
audio.play(sounds[track]);
}
Hopefully that's clear/helpful. Otherwise, let me know and I'll be glad to clarify.
You can have the sound to play embedded in the img tag's dataset :
<img src="img/piggy.png" data-sound='piggy.wav' onmouseover="playSound(this)">
function playSound(element) {
var audio = new Audio(element.dataset.sound);
audio.play();
}
you may want to pre-load all of the audio files on page load
I'm trying to use this slider: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/ but want to play a different audio file, each time the slide loads.
The way I imagine it working, is for the user to click play on the first slide, the audio to finish playing, then for the slide to change and it automatically plays the next audio file and so it continues until all slides are played through.
I've gotten it to the point where the slider changes when the audio has stopped, but cannot figure out how to play the next audio file, one after the other.
I'm very new to jQuery and am struggling a lot. Any help would really be appreciated!
Here is my work in progress: http://dailycrow.me/actualsite/
Thank you.
What I would do is to handle the audio playing with an scripting language such as PHP and call the needed method with parameters with Javascript or JQuery.
You can embed HTML with PHP so the audio can be played. Something like this:
$audioFile = "wishedAudioFile.mp3";
echo '<embed src="'.$audioFile.'" hudden="true" autostart="true"></embed>';
you can maintain an array of sources, where each index refers to a slide index, and from looking at this doc, you can use the onAfterChange event, code would be something like:
var audio = new Audio(), audSrcList = [
'slide1.wav',
'slide2.wav',
'slide3.wav',
'slide4.wav'
...
];
function afterSlideChange(slide, index){
audio.src = audSrcList[index];
audio.play();
};
...
$.Slitslider.defaults = {
...
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : afterSlideChange //CHANGED here
};
I'm working on a mobile device running iOS.
I have a DIRECT download link to an audio file (when I open it on desktop the download starts immediately). I try this but it plays only one time.
<script>var audio = new Audio("'+downloadUrl+'");</script> <button onclick="audio.play();">Play</button>
I also try to catch it with an <iframe> but it plays only one time.
When I use <audio> ,"streaming" appears and I have the same problem :
I think it's because my file is not saved on my phone. So how can I fix it, so that it plays as required.
Thanks in advance,
Let's take a look at the HTMLMediaElement DOM interface and Media Events
var audio = new Audio(downloadUrl);
audio.addEventListener('ended', function () {
audio.currentTime = 0; // seek to position 0 when ended playing
/* // alternatively, not sure about compatibility
audio.fastSeek(0);
*/
});
If you wanted it to loop rather than be playable again, set loop to true instead.
I need a sound on a mouse over event, I have this way but its problem comes from a delay between the mouse over and the sound playing, which is due (I supposed) the embed sound deal on the code. I would like to know if there is a better way using js/jquery). But not the new html5 audio tag which I don't want to implement in this particular case.
An ajax call loads the file, then I attached to the mouseOver a function named playSound()
function playSound()
{
$setSound = document.getElementById("soundWrapper").innerHTML="<embed id='sound' src='href' type=audio/mpeg hidden=false autostart=true volume=12>";
}
Then to the mouseOut event a function named stopSound()
function stopSound()
{
$stopSound = document.getElementById("soundWrapper").innerHTML="";
}
Nothing fancy but it does work. The problem as a said is the delay to playing the sound. Is there a way to play/stop the already embedded sound, not just embed a new one every time, or something alike?.
Thanks for your time and help.
Greetings.
If you have your AJAX load an audio tag (http://www.w3schools.com/tags/tag_audio.asp) into the desired place, you can play it using the .play() method in JS. Then it becomes really easy
$(YOURMOUSEOVERELEMENT).on('mouseover', function(){$('#sound').play()});
Then if you want to stop the audio when the mouse leaves:
$(YOURMOUSEOVERELEMENT).on('mouseout', function(){$('#sound').stop()});
We have a video (13 minutes long) which we would like to control using HTML5. We want to be able to let our users control and select the parts of the video they want to play. Preferably this control would be through 2 input fields. They would input start time (in seconds) in first box and input duration to play (in seconds) in second box. For example, they might want to start the video 10 seconds in and play for 15 seconds. Any suggestions or guidance on the Javascript needed to do this?
Note: I have found the following:
Start HTML5 video at a particular position when loading?
But it addresses only starting at a particular time, and nothing with playing the video for a specified length of time.
You could use the timeupdate event listener.
Save the start time and duration time to variable after loadedmetadata event.
// Set video element to variable
var video = document.getElementById('player1');
var videoStartTime = 0;
var durationTime = 0;
video.addEventListener('loadedmetadata', function() {
videoStartTime = 2;
durationTime = 4;
this.currentTime = videoStartTime;
}, false);
If current time is greater than start time plus duration, pauses the video.
video.addEventListener('timeupdate', function() {
if(this.currentTime > videoStartTime + durationTime){
this.pause();
}
});
If you are able to set start time and end time of video while setting the video url.
you can specify the start and end time in the url itself like
src="future technology_n.mp4#t=20,50"
it will play from 20th second to 50th second.
There are a lot of nuances to using the javascript solution proposed by Paul Sham. A much easier course of action is to use the Media Fragment URI Spec. It will allow you to specify a small segment of a larger audio or video file to play. To use it simply alter the source for the file you are streaming and add #t=start,end where start is the start time in seconds and end is the end time in seconds.
For example:
var start = document.getElementById('startInput').value;
var end = document.getElementById('endInput').value;
document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end;
This will update the player to start the source video at the specified time and end at the specified time. Browser support for media fragments is also pretty good so it should work in any browser that supports HTML5.
Extend to michael hanon comments:
IE returns buffered.length = 0 and seekable.length = 0. Video doesn't play. So solution:
src="video.mp4#t=10,30"
will not works in IE. If you would like to support IE only way is to use javascript to seek video just after start from 0 second.