We Keep Coding

How do i add audio to my program? I have a mp3 already in my program

I have in my index.html this already, and then i add a function named play where i call in play to my script file[then finally when i try to call in my play command if the player decides to shoot a fireball at the enemy it gives me an error saying "Cannot read property 'play' of null" What do i do?
I have this in my index.html file:
<audio id="audio" src="fire.mp3" ></audio>
At the top of my script file, i do this:
var fire = new Audio();
fire.src = "fire.mp3";
function play(){
var audio = document.getElementById("audio");
audio.play();
}`
(Fire.mp3 is already a file outside of my program, its what i called in in my index.html file)
Lastly, when the player decides to use fireball, I tried to add the one second fireball noise in by doing this:
if (fire = true && up2 === "FIRE" ) {
var enemyhealth = parseInt(enemyhealth) - parseInt(firepower);
xp + 2;
play();
`
play at the end is when i try to call in the function, but it dosent work.

You're using inconsistent methods and objects. Change your code to this:
var fire = document.getElementById("audio");
Or this:
var fire = new Audio("fire.mp3");
And then make sure it's still consistent all the way through your program.

Playing Sound Instantly (without waiting to complete) on Javascript

I partially achieved playing sound with keys with html and .play. However it waits for the track to be completed and doesn't let me play instantly on every click. However I want to trigger the sound as soon as I press it each time.
<audio id=soundId1>
<source src=sound/Saaa.wav>
</audio>
<audio id=soundId2>
<source src=sound/Baaa.wav>
</audio>
$(document).ready(function() {
var sound = {
65 : 'soundId1',
23 : 'soundId2'
};
document.onkeydown = function(e) {
var soundId = sound[e.keyCode];
if (soundId) document.getElementById(soundId).play();
else console.log("key not mapped : code is", e.keyCode);
}
Is there a way of achieving it with the above approach only without using any library?
I also looked into howler.js (I don't know if it's proper use) but I couldn't really understand how I can add multiple tracks into the dictionary. I understand how I can put the files into sounds dictionary however how to call it and link it to keyCode system above? Or should I add a new Howl for each sound individually?
What is the proper way of achieving it?

This may work but I have not tried it:
function Sound(){
this.src = ""
}
function playSound(source){
var sound = new Sound();
sound.src = source;
sound.play()
}
A new sound instance is created instead of overriding the previous one.

Detecting when variable equals another variable with jQuery ($.when()?)

Currently trying to detect when a YouTube video in a playlist ends so I can play the next one ( Adding event handler to loop through dynamically created playlist (YouTube API) ). I'm now trying to figure out when one variable is equal to another, so I can navigate to the next video in the playlist.
Here is the code to detect when a video has ended and save the video ID to a div (stopID):
function stopCycle(event) {
if (event.data == YT.PlayerState.ENDED) {
var url = event.target.getVideoUrl();
var match = url.match(/[?&]v=([^&]+)/);
var videoId = match[1];
$('#stopID').html(videoId);
}
}
And here is my attempt at detecting (and testing with an alert) when the video ID of the video clicked equals the video ID of the in stopCycle (i.e. when the video ends):
$('#Playlist').on('click', '.playlistYT', function(){
$('#subHistory').click();
videoID = $(this).attr("src").slice(27,38);
$('#infoID').val(videoID);
player.loadVideoById(videoID );
var nextVideo = $(this).parent().next().find('.playlistYT');
$.when($('#stopID').html() == videoID).then(function(){
alert("asd");
});
Currently, I get the alert immediately, i.e. before the stopID div even has a video ID in it. Where am I going wrong with $.when function? Should I be sticking to an if/else statement?

$.when takes in a promise argument. Just use an if conditional to check equality.

Javascript method pause() only works with audio element

So I have a function like this:
function music(song) {
var audio = new Audio("audio/" + song + ".ogg");
audio.play();
}
And the problem I'm having is that audio.play() works perfectly, but if I try audio.pause() later (after defining the same variable), it doesn't work. However, if I do this:
function music() {
var audio = document.getElementById("songname");
audio.play();
}
Then I can define the variable and later use audio.pause() to pause the track. The problem is that I want to do this within javascript because I have a lot of tracks and I don't want to create audio elements for each one.
Why doesn't the first piece of code allow me to pause the audio later? Is there any way I can let it pause the audio later? If not, are there any alternatives that involve playing the audio from javascript by passing a parameter which is the song title? I don't want to have to include the src in the html.
I suspect that jQuery might have an easy solution for this but form what I've researched I couldn't find anything.

audio only exists inside the function. if you need access to it outside the function then return the instance of the Audio object you are creating:
function getAudio(song, play) {
var audio = new Audio("audio/" + song + ".ogg");
if(play) {
audio.play();
}
return audio;
}
var theTrack = getAudio('my_song', true);
theTrack.pause(); // pause the song
theTrack.play(); // play the song
The second example refers to what i assume is an audio element which in turn exposes the functionality of the Audio object. The reason the second function works anywhere is because the DOM element is always present in the DOM and you are referencing that to get at the underlying Audio API, as opposed to a using the Audio object/API directly.

I just tested a snippet and it works as such
function music(song) {
var audio = new Audio("audio/" + song + ".ogg");
audio.play();
setTimeout(function() { audio.pause(); }, 5000);
}

You can create the audio variable before defining the function.
var audio = new Audio();
function playMusic(song) {
audio.src = "audio/" + song + ".ogg";
audio.play();
}
function pauseMusic() {
audio.pause();
}

Play after seeking currentTime

I'm trying to control html5 video with javascript. What I want is that when the user clicks on a button, the video will jump to another frame and keep playing from there. With my current code the playback always stops after the seek.
function jumpToTime(){
var video = $("video")[0];
video.currentTime = 160;
document.getElementbyId("videoclip").play(); //not working
};
//the following code is probably not really related to the question:
var endtimeoffset = 2000;
video.addEventListener("timeupdate", function() {
if (video.currentTime >= endtimeoffset) {
video.pause();
}
}, false);

I ran into a similar problem, and found a solution by pausing the video, then setting the currentTime, then playing the video. To update your code:
function jumpToTime(){
var video = $("video")[0];
video.pause();
video.currentTime = 160;
video.play();
};

Some things I would try:
in the jumpToTime() function, you have two different references to supposedly the same video (one obtained through jQuery and the other by getElementById()). Are you sure these reference the same video? To be safe, I would just call play() on the 'video' reference that you set the currentTime on.
This is probably a copy and paste issue since the console would complain if this was in the actual code, but you did mispell getElementById() (Need to capitalize the B).
For debugging purposes, I would comment out the 'timeupdate' event code, to make sure this isn't the issue and that this code isn't pausing the video after you update the timehead or call play. It probably isn't, since you are setting the current time to be much less than the offset you are comparing it with. It would, however, be an easy test to eliminate this as a possible cause of the issue.

function jumpToTime(){
document.getElementById("videoclip").currentTime = 160;
document.getElementById("videoclip").play(); //not working
};
getElementbyId --> getElementById -- b --> B
get direct object by id...