Posted some code earlier, and have tried to revamp it.. to no avail. The code below gives no errors, and I -think- (I am a complete newb) it should work, but I am not sure why it's not playing. I'm trying to make a soundboard for our D&D game. The code is a follows:
<html>
<body>
<audio id="heroic" src="heroic.mp3"></audio>
<button onClick="togglePlay()" id="heroicbutton">Heroic Battle Music</button>
<script>
//<!--Audio as variables-->
var audio1 = new Audio("heroic.mp3")
var isPlaying = false;
function togglePlay(){
if (isPlaying = true){
audio1.pause()
} else {
audio1.play();
}
};
audio1.onplaying = function () {
isPlaying = true;
}
audio1.onpause = function () {
isPlaying = false;
};
</script>
</body>
</html>
The file 'heroic.mp3' is in the same folder, and no errors appear on chrome's developer tools. I am not sure why nothing is playing.
You have actually made a simple mistake here.
Inside the if you should have comparison '==' not assignment '='
if (isPlaying == true){
Related
Javascript audio does not stop and play multiple tracks simultaniously.
I'm trying to shuffle randomly number of MP3/WAV tracks and it working nicely up until the point it suppose to stop the last track so there is a live merge between the previous tracks and it obviously sounds like a mess.
I bet it's a tiny tweak to solve that issue but... :)
anyways Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title> </title>
</head>
<body>
Thanks in advance for your kind help :D
var t=setInterval(function(){myTimer()},3000);
var files=
[
'Hezi-Gangina#1.mp3',
'Hezi-Gangina#2.mp3',
'Hezi-Gangina#3.mp3',
'Hezi-Gangina#4.mp3'
];
function myTimer()
{
if(audio)
{
audio.pause();
audio.currentTime=0;
delete audio;
}
var i=Math.floor(Math.random()*files.length);
var url=files[i];
var audio=new Audio(url);
audio.play();
document.title=url.replace(/\.[^/.]+$/,'');
}
</script>
</body>
</html>
The problem is the interval's callback function myTimer().
Let's have a look:
if(audio)
{
audio.pause();
audio.currentTime=0;
delete audio;
}
Above, you're checking for the existence of the variable audio but this condition won't ever be true. Why? It's defined after this check and it's defined in the local scope of the callback function:
var audio=new Audio(url);
audio.play();
So the local variable will be re-defined on each call to myTimer and just 'lives' inside this function.
To fix this, you need to make audio a global variable and modify the if check to like this:
if(audio != null)
this will make sure it won't try to stop the audio the first time.
Here's your modified code:
var audio=null;
var t=setInterval(function(){myTimer()},3000);
var files=
[
'Hezi-Gangina#1.mp3',
'Hezi-Gangina#2.mp3',
'Hezi-Gangina#3.mp3',
'Hezi-Gangina#4.mp3'
];
function myTimer()
{
if(audio != null)
{
audio.pause();
audio.currentTime=0;
delete audio;
}
var i=Math.floor(Math.random()*files.length);
var url=files[i];
audio=new Audio(url);
audio.play();
}
I'm trying to create, as a starting excercise, a soundboard for our D&D sessions. I'm currently trying to make it so that when a button is clicked, the variable 'audio' is set to that, and that it then runs the function to play or pause audio, depending on whether it's running or not. I have JS and HTML in the same file (I realise this isn't good, however). Below is my code:
<button id="play1st">Heroic Battle Music</button>
<button id="play2nd">Military Battle Music</button>
<button id="play3rd">Stronghold Battle Music</button>
<!--Audio to be played -->
<audio id="heroic" src="heroic.mp3"></audio>
<audio id="combat_rome" src="combat_rome.mp3"></audio>
<audio id="stronghold" src="stronghold.mp3"></audio>
<!--JavaScript audio -->
<script>
function playMusic() {
document.getElementById("play1st").addEventListener ('click', music1());
document.getElementById("play2nd").addEventListener ('click', music2());
document.getElementById("play3rd").addEventListener ('click', music3());
var isPlaying = false;
function music1() {
var audio = new Audio("heroic.mp3");
togglePlay();
};
function music2() {
var audio = new Audio("combat_rome.mp3");
togglePlay();
};
function music3() {
var audio = new Audio("stronghold.mp3");
togglePlay();
};
function togglePlay(){
if (isPlaying){
pause()
} else {
audio.play();
}
};
audio.onplaying = function () {
isPlaying = true;
};
audio.onpause = function () {
isPlaying = false;
}};
</script>
I'm probably missing something very basic, so any explanation would be most welcome. Thank you!
guys. Please explain this to me.
I wanted to create a single mute/unmute button for my page. (audio starts automatically)
So here the code I used first time:
<script>
var sound = getElementById (‘background_sound’);
function mute(){
if(background_audio.muted == false){
background_audio.muted = true;
} else {
background_audio.muted = false;
}
}
</script>
But it didn’t work. So I just removed the first line (I mean this var) and addressed the id directly. And it worked. Now my html looks like this:
<audio id="background_audio" autoplay="true" loop="loop">
<source src="Audio/flute.mp3">
If you are reading this, it is because your browser does not support the audio element.
</audio>
<button onclick="mute()">
<i class="fa fa-music"></i></button>
And javascript like this
<script>
function mute(){
if(background_audio.muted == false){
background_audio.muted = true;
} else {
background_audio.muted = false;
}
}
</script>
The question is how can I address Id directly without creating a variable? It works fine though but will I have any problems with the code later? I just thought I need to assign a var this to work. A bit confused.
try this i am sure this will work
<script>
function mute(){
if(document.getElementById('background_audio').muted == false){
document.getElementById('background_audio').muted = true;
} else {
document.getElementById('background_audio').muted = false;
}
}
</script>
Sometimes when an error is detected I want my page to play a sound.
I made this javascript, it does not work:
function playsound(){
var obj = document.createElement("audio");
obj.setAttribute("src", "click.mp3");
obj.play();
}
if($('#noerrors').css('display') != 'none' ) {
playsound();
}
Why not?
I want to call playsound(); whenever it please me.
When using:
if($('#noerrors').css('display') != 'none' ) {
var obj = document.createElement("audio");
obj.setAttribute("src", "click.mp3");
obj.play();
}
It works fine. What's the problem of the first script?
http://jsfiddle.net/3Camg/
<div id="error_sound"></div>
<span class="click">Test Sound by clicking here</span>
function play_sound()
{
$('#error_sound').html('<audio src="http://www.intriguing.com/mp/_sounds/hg/dead.wav" id="err_player"></audio>');
document.getElementById('err_player').play();
}
$('.click').bind('click',play_sound);
You cannot call play on jQuery element, but the HTML element that underlies it.
Can I suggest you another solution?
Define <audio> just once at the beginning, then call play() by selecting that tag:
1.Insert this whenever you want, at the end of the <body> for example.
<audio id="myAudio" src="click.mp3"></audio>
2.Then if you have an error, play it or pause otherwise:
if($('#noerrors').css('display') != 'none' ) {
document.getElementById("myAudio").play();
} else {
document.getElementById("myAudio").pause();
document.getElementById("myAudio").currentTime = 0;
}
I suggest this solution (DEMO):
function playsound(){
var $audioElement = $("<audio id='audioId'/>");
$audioElement.attr('src', "click.mp3");
$audioElement[0].load();
$audioElement[0].play();
}
if($('#noerrors').css('display') != 'none' ) {
playsound();
}
To ensure to play after load:
$audioElement.on('canplay canplaythrough', function(){
$audioElement[0].play();
});
I am new to HTML5 and I am exploring HTML5 features. There I came across audio tag.
I written code with it to play sound files.
I am having one problem with this tag. On button click, I want to change the sound file stopping the previous one.
I searched a lot but didn't find anything.
Please help me to stop the sound played by audio tag.
Here is my code;
try
{
if(MyAudio != undefined)
{
MyAudio = null;
}
MyAudio = new Audio("filename");
MyAudio.play();
}
catch(v)
{
//alert(v.message);
}
Try this:
try
{
if(MyAudio != undefined)
{
MyAudio.pause();
}
MyAudio = new Audio("filename");
MyAudio.play();
}
catch(v)
{
//alert(v.message);
}
As commented in this cuestión: HTML5 Audio stop function, a better solution could be:
var sound = document.getElementById("audio");
sound.pause();
sound.currentTime = 0;