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
Related
So essentially I am trying to build a browser game in which various texts and audio clips are played at random, and then you must choose what language it is. I've built the base for it which functions well with just text and choosing an answer at random, but I'm having trouble adding the sound file and having it play. This is my first real project using JavaScript and I was hoping I could get some help here.
The HTML div I'm using is as follows
<div class="field">Play Audio</div>
<button id="audio" onclick="audio_clicked()"></button>
</div>
then I have a seperate, linked .js file which I'm doing the following-
Storing the questions in a question bank
quiz[0] = new Question("Hola", "languages/spanish.mp3", "Spanish", "Italian", "Cyric");
quiz[1] = new Question("Hello", "languages/english.mp3", "English", "Spanish", "French");
quiz[2] = new Question("Haye", "languages/udhr_somali.mp3", "Somali", "Norwegian", "Swedish");
Reading the questions
document.getElementById("question").innerHTML= randomQuestion.question;
document.getElementById("audio").innerHTML=randomQuestion.audio;
and finally executing the process when the button is clicked
// play audio button clicked
function audio_clicked() {
audio.play();
}
// what to do when answer a button clicked
function answerA_clicked() {
var answerA = document.getElementById("answerA").value;
checkAnswer(answerA);
}
This is where I am having the trouble, as I'm not sure it is reading my audio correctly. It started displaying the audio file name on the button which is the opposite of what i want. The full project is on my GitHub github.com/tjsanzen/language-game
Thank you for any help you may provide :)
If you want to play a audio with JavaScript use Audio.
function audio_clicked(url) {
new Audio(url);
audio.play();
}
Then change your btnProvideQuestion to handle the click event
document.getElementById("audio").onclick = function () {
audio_clicked(randomQuestion.audio);
}
Or you can combine them.
document.getElementById("audio").onclick = function () {
new Audio(randomQuestion.audio);
audio.play();
}
I may need a little favor for my project
I'm trying to create a play button based on a gif image.
How to make it so the gif would function as a play function javascript?
I'd also want to make it so when I click the gif image it would start playing the animation instead of the gif auto play.
You can just simply
use the css & javascripts below, however you need to use two different type of pictures, first one would be the gif image, and the other one are a regular img type e.g jpeg or png file.:
And if you don't know already if you're using chrome browser, simply right click on your project page then just click inspect, then choose inspect elements, drag it to the element so you would be able to get the specific css id.
<style>
#u11246{
visibility: hidden;
}
</style>
And try this javascript as the follow:
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
document.getElementById("u11236").style.visibility = "hidden";
document.getElementById("u11246").style.visibility = "inherit";
}
function stop(){
var audio = document.getElementById("audio");
audio.pause();
document.getElementById("u11236").style.visibility = "inherit";
document.getElementById("u11246").style.visibility = "hidden";
}
</script>
And use the following code for the audio.
<audio id="audio" src="http://m4a-64.cdn107.com/01/65/45/0165451642.m4a" ></audio>
Good luck!
You could use the following code snippet, to make a custom play button/element:
<button id='playVid'>Play</button>
document.getElementById('playVid').onclick = function (){
document.getElementById('video').play();
};
Check out this info on w3schools.com: https://www.w3schools.com/tags/av_met_play.asp
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 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">
I am working on a project based on jquery animation its animation works fine on desktop (Firefox,chrome,opera,IE) also support HTML 5 audio tag but in Ipad/iphone/ Android safari audio tag doesn’t support.Its works fine on Ipad/iphone/ Android firefox.i have searched it in many forum don’t get desire Result. I have used this function :
function playmusic(file1,file2)
{
document.getElementById('music11').innerHTML='<audio id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
$("#music1").get(0).play();
}
I have called function like : playmusic(2.ogg','2.mp3');
If I give autoplay in audio tag it works but play method not working and I have to use play method as in my application needs sound in particular event see the link
http://solutions.hariomtech.com/jarmies/
I have also changed my function and give direct audio tag in div and call function the same problem I face as I mentioned above. I need sound play in background without any click.if I use auto play method so it play sound only one time but I need sound multiple time on event.
Try to add an autoplay attribute on the audio tag:
function playmusic(file1, file2) {
document.getElementById('music11').innerHTML='<audio autoplay id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
}
I would however recommend building a proper element and insert that into the DOM - something like this:
function playmusic(file1, file2) {
var audio = document.createElement('audio');
audio.preload = 'auto';
audio.autoplay = true;
if (audio.canPlayType('audio/ogg')) {
audio.src = file1;
}
else if (audio.canPlayType('audio/mpg')) {
audio.src = file2;
}
document.getElementById('music11').appendChild(audio);
}