Jump to content

<audio src=playThis> Unexpected token ?


vmars316

Recommended Posts

Hello & Thanks ,
I am getting an error :
Uncaught SyntaxError: Unexpected token <
on the line <audio src=playThis>
in this code :
function playAudio(playThis) {
<audio src=playThis>
<p>Your browser does not support the <code>audio</code> element </p>
</audio>
}

 

 

Pls , what am I doing wrong ?

Thanks

Link to comment
Share on other sites

What I am passing into playAudio is this:

"sounds/ObamaOnVideo.mp3"

 

 

And when I code the following , I get same error:

function playAudio() {
<audio>
<source src="sounds/ObamaOnVideo.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
}

 

Thanks

Link to comment
Share on other sites

function playAudio(){ } belong to Javascript. Audio tag is HTML element.

 

to play audio from audio tag in HTML with Javascript, set an id for the HTML audio tag:

 

HTML

<audio id="myAudio">

  <source src="sounds/ObamaOnVideo.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.

</audio>
then play it through Javascript:
Javascript
var myAudio = document.getElementById("myAudio"); 

function play_my_audio() { 
    myAudio.play(); 
}

play_my_audio();
Edited by musicman
Link to comment
Share on other sites

Ooooh... , Thanks Newbie:
In the mean time I discovered the format below :

playAudio("sounds/ObamaOnVideo.mp3");
function playAudio(playThis) {
var audio = new Audio(playThis);
audio.play();
}

 

 

My question on that is ;
Does the playThis file remain in memory ?
Or does it get released after the audio.play(); ?
If it remains in memory , how can I access it multiple times ?
Thanks
Link to comment
Share on other sites

the audio is still there. you can play the audio continuously by providing buttons: Play and Pause.

<button id="ply">Play</button>
<button id="stp">Stop</button>
    
<script>
    
    var mySound = new Audio( "Always.mp3" );
    
    document.getElementById( "ply" ).onclick = function(){
        
        mySound.play();
        
    };

    document.getElementById( "stp" ).onclick = function(){
        
        mySound.pause(); // pause the audio, it will play again from the last time where it stopped
        mySound.currentTime = 0; // reset the audio to the first time
        
    };    
    
</script>

anyway, what you're trying to achieve?

  • Like 1
Link to comment
Share on other sites

playAudio("sounds/ObamaOnVideo.mp3");
 
function playAudio(playThis) { 
var audio = new Audio(playThis);
      audio.play();
}

Creates an audio object in background that does not physically exist as does the normal html5 audio element on the actual page, each time you play such audio files, similar to images, css, js files they are stored as cache files, for quick access when you wish to go to web page containing these files at a later date, without the need to reload these files.

 

The viewable html5 audio can be added with its own built in controls by simply adding

<audio controls>
  <source src="sounds/ObamaOnVideo.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
  • Like 1
Link to comment
Share on other sites

Thanks Folks ,
The code is for a computer game:

Here is the code to play sound:
for (var i = cowpies.length - 1; i >= 0; i--) {
thisPie = i;
if (cowpies[thisPie].idActive) {
if(this.visible) { // yes , do collision CK
if (cowpies[thisPie].y < this.y + this.height && cowpies[thisPie].y + cowpies[thisPie].height > this.y)
{ if (cowpies[thisPie].x < this.x + this.width && cowpies[thisPie].x + cowpies[thisPie].width > this.x )
{ // alert("YES , a collision has occurred");
thisIdTag = this.idTag ;
var yesTruth = thisIdTag.startsWith("truth");
var yesLies = thisIdTag.startsWith("lies");
//alert("yesTruth= "+ yesTruth + "\n yesLies= " + yesLies);
if(yesTruth) { switch(this.idTag) {
case "truth01": this.visible = false ; truth01.tripsCnt =0 ; lies01.visible=true ;
alert("case 'truth01': ") ;
playAudio("sounds/oops.mp3"); break ;
// case "truth02": this.visible = false ; lies02.visible = true ; break ;
// case "truth03": this.visible = false ; lies03.visible = true ; break ;
// case "truth04": this.visible = false ; lies04.visible = true ; break ;
}
}
// play sound & keep score oops hit + total shots oops.mp3
if (yesLies){ switch(this.idTag) {
case "lies01":
lies01.tripsCnt =0;
truth01.speedX=1 ; idTag = "truth01" ; lies01.visible=false ;
truth01.visible=true ; alert("case 'lies01': ") ;
playAudio("sounds/ObamaOnVideo.mp3"); break ;
// case "lies02": this.visible = false ; truth02.visible = true ; break ;
// case "lies03": this.visible = false ; truth03.visible = true ; break ;
// case "lies04": this.visible = false ; truth04.visible = true ; break ;
}
// play sound & keep score good hit + total shots
}
cowpies.splice(thisPie,1); //alert("cowpies.length= "+ cowpies.length);
}
}
}
}
} // endof or (var i = cowpies.length - 1

 

Here is line to play sound:
playAudio("sounds/ObamaOnVideo.mp3");

 

and here is the 'playAudio function':
function playAudio(playThis) {
var audio = new Audio(playThis);
}

 

Everytime there is a collision between a cowpie and a person ,
I need to play/replay that sound .
So , I need to know 'how to replay sound from cache' ,
without any controls visible .
Thanks
Link to comment
Share on other sites

you can try to add play() to the function:


function playAudio(playThis) {

var audio = new Audio(playThis);
audio.play();

}

so whenever we call it, it will play the sound:



playAudio( source );



or you can also try to make audio variables first like:


var audio1 = new Audio( "sounds/ObamaOnVideo.mp3" );
var audio2 = new Audio( "sounds/oops.mp3" );

and play it like:


switch(this.idTag) {

case "truth01":
audio2.play();
break ;
case "lies01":
audio1.play();
break ;

}

  • Like 1
Link to comment
Share on other sites

Like i said every time the audio is called by function playAudio("sounds/ObamaOnVideo.mp3"); the audio file is loaded into cache, you can get cacheviewer2 addon for firefox to see this. Then when the file is called again using function the function plays the existing cache file.

 

There might be a delay on first playing of audio file, but you can preload all audio files beforehand into browser cache and play instantly when called using function, very similar to preloading large images for image gallery when thumbnail of same image is selected which reduces load time.

Link to comment
Share on other sites


 

var My_audio_files = ["sounds/ObamaOnVideo.mp3", "sounds/oops.mp3"];

var new_Audio_files = [];

 

function preload_audio_files(arr_files)

{

for (var i = 0; i < arr_files.length; i++)

{

new_Audio_files = new Audio();

new_Audio_files.src = My_audio_files;

new_Audio_files.preload = "auto";

}

}

preload_audio_files(My_audio_files);

 

function playAudio(playThis) {

playThis.play();

}

 

//call playAudio function with relative new_Audio_files[] index reference matching My_audio_files index of files

playAudio(new_Audio_files[0]); // the first song

//playAudio(new_Audio_files[1]); // the second song

  • Like 1
Link to comment
Share on other sites

Hey dsonesuk , Thanks a lot !

I am studying it a bit .

<!DOCTYPE html>
<head>
<!--
rosemary & lemongrass
-->
</HEAD>
<body>
<div>
<button onclick="preload_audio_files(My_audio_files)">preload_audio_files(My_audio_files)</button>
<button onclick="playMp3()">playMp3()</button>
</div>
<script type='text/javascript'>
var My_audio_files = ["sounds/ObamaOnVideo.mp3", "sounds/oops.mp3"];
var new_Audio_files = [];
var numAudios = 0;
function preload_audio_files(arr_files)
{
for (var i = 0; i < arr_files.length; i++)
{ new_Audio_files = new Audio();
new_Audio_files.src = My_audio_files;
new_Audio_files.preload = "auto";
numAudios = i;
}
alert("new_Audio_files[0]= " + new_Audio_files[0]);
}
// preload_audio_files(My_audio_files);
function playAudio(playThis) {
playThis.play();
}
//
function playMp3() {
playAudio(new_Audio_files[0]); // the first song
setTimeout(function() { playAudio(new_Audio_files[1]); }, 2000);
}
//call playAudio function with relative new_Audio_files[] index reference matching My_audio_files index of files
// playAudio(new_Audio_files[0]); // the first song
// playAudio(new_Audio_files[1]); // the second song
</script>
</body>
</html>

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...