We Keep Coding

Trouble Playing Changing Audio Files in JavaScript

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

Stop video autoplay on mobile

If you go to my site:
http://www.crookedfoothuntclub...
On mobile you will here the video play in the background. I have set the visibility to false on bigger screen-sizes and I was hoping that this would not only hide the video but prevent it from loading all together hence saving the end user bandwidth and load time. (Please keep this in mind on the primary objective I would like to accomplish).
As a stop gap I have tried to at least prevent the autoplay of the video by adding some custom JS.
The class name of the video on my home page is:
home-video
Here is the script I'm trying to use:
<script>
if($(window).width() >= 786){
var vid = document.getElementsByClassName("home-video");
vid.autoplay = false;
vid.load();
}
</script>
Currently the effect I'm going for is not happening and I need some help getting this to work.
If you know a better way to achieve the effect I'm asking about please consider me open to that approach in correcting the current situation.
Thank you for the help in advance.

Use Detectizr for your requirement and in if condition for mobile devices as vid.autoplay = false; and for desktop make it vid.autoplay = true;.
Thanks

Mute <audio> sound with JavaScript on page focus

I have the following code that should mute audio when window is focused, but I must have done something wrong since it doesn't mute at all;
script
$(function() {
$(window).focus(function() {
console.log('Focus');
/*getElementById('notificationsound').muted = true;*/
$("#notificationsound").prop('muted', true); //mute
});
$(window).blur(function() {
console.log('Blur');
});
});
html
<audio id="notificationsound" src="sound/notify.mp3" preload="auto"></audio>
The goal is for the notification sound to be played only when the page is not viewed / out of focus (I'm using this "script structure" since it's likely I'll add more to the different states later on).
I know I'm missing something very basic since I'm a beginner, and since it logs focus/blur in the console correctly. Also – I know this most likely is a very similar question to others asked here before, but I could only find rather aged answers (which my code is based upon) so if this is not the "modern" or best practice anymore I'd love examples of alternate methods.
Examples are very much appreciated in case of major change is needed or suggested.

Try $("#notificationsound").prop('muted', true); - you missed the '#' which is the Id selector in JQuery.

$("#notificationsound").stop();
or
$("#notificationsound").pause();
$("#notificationsound").currentTime = 0;
Or even use JS:
var audio = new Audio('example.mp3');
which allows such functions:
audio.currentTime=1;
audio.play();
audio.stop();
audio.pause();
and even:
audio.volume = 0.5 //half

BigVideo.js URL redirect at end of playback

I have implemented a Background Video on a page using BigVideo which is based off Video.js
When an div is clicked, the video plays in the background. I cannot for the life of me figure out how to redirect to another URL when the video is done playing. This is the code I am using:
Link to play the Video:
Code to redirect when ended:
<script type="text/javascript">
_V_("home_g").ready(function(){
this.addEvent("ended", function(){
{window.location = "www.google.com"}
});
});
Any help would be greatly appreciated. Here is the full test site: Test Site
After Trying for a few days to get this to work correctly, I've resorted to making a redirect based on the time of the video if anyone else has the same problem. If anyone has the answer to make it work correctly great, if not anyone else could simply do this like I did:
<script type="text/JavaScript">
redirectTime = "107000";
redirectURL = "index.htm";
function timedRedirect() {
setTimeout("location.href = redirectURL;",redirectTime);
}
</script>

try this:
var BV = new $.BigVideo();
BV.init();
BV.getPlayer().on("ended", function () {
// your code after video has finished playing
});

HTML5 Video Not Pausing

I am working on a iPad HTML app that has two videos in it. The HTML code is loaded dynamically. The page has two videos with text corresponding to them. The videos also have just two controls. Play and Pause. However the issue I am having is the Video will only pause when the other is playing. Basically in my if / else statement the else is not being called at all. Here is my code. Anyone know why it won't pause when trying to click on the overlay again? Thank you in advance!
$('div[class*="video-overlay"]').bind('mousedown', function() {
var video = $(this).next('video')[0];
var text = $(this).attr('data-play');
if (video.paused) {
video.play();
$('p').addClass('fade');
$('#' + text).removeClass('fade');
$(this).removeClass('overlay');
$('div[class*="video-overlay"]').not(this).addClass('overlay');
$(this).children().removeClass('video-play');
$('video').not($(this).next(el)).get(0).pause();
$('.play').not($(this).children()).addClass('video-play');
$(video).on('ended', function() {
$(this).prev('div').children().addClass('video-play');
video.pause();
});
} else {
video.pause();
console.log('Hey mom, I paused all by myself!');
}
});

Without your html, I can't be sure, so I can only guess.
var video = $(this).next('video')[0];
change this line to
var video = $(this).find('video')[0];
To get a more definite answer, please provide your html code.

It was actually in my CSS. I didn't have the overlay in front of the video. So I changed the z-index to a higher value and the fixed it. I had the play button in front so it was playing the video, just not the overlay. Doh!