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();
}
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
Is there a way we can play audio sound or Gif image on Google AppMaker? I have tried the following to play .sound that I kept as HTML containing the .mp3 file src I copied from the Resources.
var page = app.pages.RateToilet;
var x = page.descendants.sound;
function playAudio() {
x.play();
}
I got the following error
x.play is not a function
at playAudio (client:24:7)
at RateToilet.Image7.onClick:5:3
Please advise .. Thanks :)
To play a .gif file is pretty straight forward. After you've uploaded the file to the resources section of appmaker, you simply need to drag and drop as shown below.
Now, to play a sound you've saved inside the resources, please do the following:
1) Add a button widget and set its text property to "play sound".
2) Add the following code to the onClick event of the button widget:
var track = "";
var audio = document.getElementById("audio");
audio.setAttribute("src", track);
if(widget.text === "play sound") {
widget.text = "stop sound";
audio.play();
} else {
widget.text = "play sound";
audio.pause();
audio.currentTime = 0;
}
3) Add an HTML widget below the button widget.
4) Make sure to check the allowUnsafeHtml checkbox
5) Put the following inside the HTML widget html value:
<audio id="audio"></audio>
6) Next, go to the html display section and make sure to uncheck visible and set visibility type to hidden, just as shown below
7) Finally, go to the resources section of appmaker, copy the resource URL and paste its value inside the onClick event of the button widget, so that var track equals to that value. See below:
I built this little demo app for you hoping it could help you.
You can download from here. I hope it helps!
I am trying to play two audio at the same time. One audio is using to provide background music and another one is using to provide speech. I am playing audio on click . After click, audio plays simultaneously and immediately on desktop but on IPad Air and Ipad pro audios play after a delay. I am not getting what is wrong with my code ?
<script>
var audio1 = new Audio();
var audio2 = new Audio();
$(document).ready(function(){
$(".playAudio").on("click touchstart" , function(){
audio1.src= "media/audio/music.mp3";
audio2.src= "media/audio/fullIntro.mp3";
audio1.play();
audio2.play();
});
});
</script>
HTML
<div class="playAudio"><span id="span1">Play Audio</span></div>
Please help !
Thanks !
I highly suspect that your problem might be that both files aren't finished downloading at the same time. Hence the delay between the two audio files.
My suggestion would be to wait for every file to be downloaded before proceeding. You can do so with a little bit of Javascript :
Here's the code
$(window).on("load", function() {
$(".playAudio").on("click touchstart" , function()
{
audio1.src= "media/audio/music.mp3";
audio2.src= "media/audio/fullIntro.mp3";
audio1.play();
audio2.play();
});
});
That should do the trick.
Credits : I found another question that may help you as well
Official way to ask jQuery wait for all images to load before executing something
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 doing a personal project using css/Javascript/html
I've encountered a little problem with my audio.
The situation is that I have an audio playing as soon as the
page loads (that works) but after ones HP turns to 0 I want the audio
to change. What happens is once I get to that situation the audio is cut out.
<audio id="myAudio" src="BattleTheme.mp3" type='audio/mp3'></audio>
JavaScript code:
function intervalDone(){
var y=document.getElementById("message");
if(h1<=0){
document.getElementById('att').src="backgrounds/spacertransparent1.png";
document.getElementById('slaz').src="characters/slayerzach/slayerzach-faintTransparent.png";
document.getElementById('myAudio').src="BattleWin.mp3";
y.innerHTML="<center>SlayerZach has fainted, FighterDan13 Wins.</center>";
document.getElementById("butAtt").disabled = true;
document.getElementById("butItems").disabled = true;
document.getElementById("butRun").disabled = true;
}
}