vmars316 Posted May 2, 2016 Share Posted May 2, 2016 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 More sharing options...
musicman Posted May 2, 2016 Share Posted May 2, 2016 Hi, the src attribute should be a string, url to the audio file. and.. it looks like you put HTML code into a Javascript function? Link to comment Share on other sites More sharing options...
vmars316 Posted May 2, 2016 Author Share Posted May 2, 2016 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 More sharing options...
musicman Posted May 2, 2016 Share Posted May 2, 2016 (edited) 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 May 2, 2016 by musicman Link to comment Share on other sites More sharing options...
vmars316 Posted May 2, 2016 Author Share Posted May 2, 2016 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 More sharing options...
musicman Posted May 3, 2016 Share Posted May 3, 2016 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? 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 3, 2016 Share Posted May 3, 2016 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> 1 Link to comment Share on other sites More sharing options...
vmars316 Posted May 3, 2016 Author Share Posted May 3, 2016 Thanks Folks , The code is for a computer game: http://liesandcowpies.com/javascript/BenghaziGame-starter-08-TCT-Collisions.html 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 More sharing options...
musicman Posted May 3, 2016 Share Posted May 3, 2016 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 ; } 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 3, 2016 Share Posted May 3, 2016 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 More sharing options...
dsonesuk Posted May 3, 2016 Share Posted May 3, 2016 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 1 Link to comment Share on other sites More sharing options...
vmars316 Posted May 4, 2016 Author Share Posted May 4, 2016 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 More sharing options...
vmars316 Posted May 5, 2016 Author Share Posted May 5, 2016 Ah , working real well , Thanks Again Onwards ! http://liesandcowpies.com/javascript/BenghaziGame-09-Sound.html I am hoping to turn this into a Tutorial ... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now