JavaScript - Help With An Audio Analyser Script
Hi everyone,
I'm an animator just beginning to learn the unity game engine. In other words, I know almost no JavaScript and would like to learn the basics in parallel with working on my project. I would ultimately like to create a scene in which I can use the spectrum of a sound track to drive certain properties of objects in the scene. I started off by following this spectrumAnalyser tutorial which I then expanded for 21 cubes. This was working pretty well, but the higher frequencies looked like they needed much more of the spectrum than the lower. I asked a coder colleague (more proficient in c# than js) for his help in expanding the code to analyse the full spectrum. He showed me a really nice way to assign various parts of the spectrum to each cube in the scene using a fibonacci sequence to gradualy assign more and more of the spectrum to the cubes that were to be driven by those frequencies. So as you can see I commented out some chunks of now redundant code (its a bit of an unfinished mess but I've left them in so you can kind of see what i was trying to do). However this new technique now doesn't actually drive the cubes anymore and my friend doesn't understand why. Maybe somthing to do with the AudioListener.GetSpectrumData? I was wondering if any of you guys could point me in the right direction. This is what we have now: ----------------------------- #pragma strict function Start () { } function Update () { //var Audio : AudioListener; //var spectrum : float [] = Audio.GetOutputData; //AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming); var spectrum : float[] = AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming); var cubeList : float []; cubeList[0] = spectrum[1]; cubeList[1] = spectrum[2]; cubeList[2] = spectrum[3]; var index : int = 3; var fibonacci : int = 1; var fibonacciIncrease : int = 1; for(var i : int = 3; i < 21;++i) { cubeList[i] = 0; var maxIndex : int = index + fibonacci; while (index < maxIndex) { cubeList[i] = cubeList[i] + spectrum[index]; ++index; } fibonacci = fibonacci + fibonacciIncrease; fibonacciIncrease++; } /* var c6 : float = spectrum[7] + spectrum[8] + spectrum[9] + spectrum[10]; var c7 : float = spectrum[11] + spectrum[12] + spectrum[13] + spectrum[14] + spectrum[15] + spectrum[16] + spectrum[17]; var c8 : float = spectrum[18] + spectrum[19] + spectrum[20] + spectrum[21] + spectrum[22] + spectrum[23] + spectrum[24] + spectrum[25] + spectrum[26] + spectrum[27] + spectrum[28]; var c9 : float = spectrum[29] + spectrum[30] + spectrum[31] + spectrum[32] + spectrum[33] + spectrum[34] + spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40] + spectrum[41] + spectrum[42] + spectrum[43] + spectrum[44]; var c10 : float = spectrum[66] + spectrum[67] + spectrum[68] + spectrum[69] + spectrum[70] + spectrum[71] + spectrum[72] + spectrum[73] + spectrum[74] + spectrum[75] + spectrum[76] + spectrum[77] + spectrum[78] + spectrum[79] + spectrum[80] + spectrum[81] + spectrum[82] + spectrum[83] + spectrum[84] + spectrum[85] + spectrum[86] + spectrum[87]; var c11 : float = spectrum[18] + spectrum[19]; var c12 : float = spectrum[20] + spectrum[21] + spectrum[22]; var c13 : float = spectrum[23] + spectrum[24] + spectrum[25]; var c14 : float = spectrum[26] + spectrum[27] + spectrum[28]; var c15 : float = spectrum[29] + spectrum[30] + spectrum[31]; var c16 : float = spectrum[32] + spectrum[33] + spectrum[34]; var c17 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c18 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c19 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c20 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c21 : float = spectrum[1000] + spectrum[1001] + spectrum[1002] + spectrum[1003] + spectrum[1004] + spectrum[1005] + spectrum[1006] + spectrum[1007] + spectrum[1008] + spectrum[1009] + spectrum[1010] + spectrum[1011];*/ var cubes : GameObject[] = GameObject.FindGameObjectsWithTag("CubeTag"); for(var k = 0; k < cubes.length; k++) { switch (cubes[k].name) { case 'c1': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c2': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c3': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c4': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c5': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c6': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c7': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c8': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c9': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c10': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c11': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c12': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c13': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c14': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c15': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c16': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c17': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c18': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c19': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c20': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c21': cubes[k].transform.localScale.y = cubeList[k]*10; break; } } } ------------------------------ Many thanks for any help you can give, i'm off to learn some basics! Similar TutorialsHeya peeps So I'm in the process of building a website where audio can be purchased and downloaded. I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle. Is there a way of doing it? All I want is a basic play/pause/stop button. To control a piece of sound. Thanks I've got this JavaScript code that I'm using to play audio on my site made specifically for iPhones, iPods, and whatnot. However, my only problem is, that I can only pick one audio file to play from, no matter what. Can someone tell me what I'm doing wrong? I really need this specific code cause it allows me to play audio without going into the Media Player on the iPhone and iPod. Here's what I have in the head section: Code: <script type="text/javascript"> function play_single_sound() { document.getElementById('audiotag').play(); } </script> And the body: Code: <div id="audio"> <audio id="audiotag" src="audio.wav" autobuffer="autobuffer"></audio> </div> And now to actually play the audio: Code: <a href="javascript:play_single_sound();">Play audio</a> I can play audio fine, but I'm only limited to one audio file per page. Is there anyway around this?? Hey guys, i havent got any code and im not asking for any! just wondering if anyone knows some good tutorials on vectors and how i can use them to store audio files! thanks in advance!
Hi, I worked on this website : http://www.kesslercareers.com/index.html and cannot find out why it does not work in IE while it works in other browsers. The small video does not play while the sound does. As far as I can see it works fine in FF and Chrome. Anybody any idea? Thanks Purmar So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video. What could I possibly be doing wrong? Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4 JS: http://xonicgames.com/video/?i=6 Thanks hey there, i am making a slideshow site, a user can add effects to pictures using a drop down menu and choose a sound to accompany picture when the slideshow runs. i have hit a snag, my function is taking in the choice from the user for both sounds, but playing them over one another, i think its something silly im missing out. here is the function where i think im going wrong: Code: function EvalSound() { var sound1 = document.getElementById("sound1"); var choice = sound1.options[sound1.selectedIndex].value; var sound2 = document.getElementById("sound2"); var choice2 = sound2.options[sound2.selectedIndex].value; var pic1 = document.getElementById("first_pic"); var pic2 = document.getElementById("second_pic"); soundManager.play(choice); soundManager.play(choice2); } Thanks for any help Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout? http://www.javascriptkit.com/script/....shtml#current Hi there, I am just writing to see if I can receive some help regarding an issue I'm having? I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such. I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/ Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page) Code: // ===== VARIABLES ===== var isPlaying = false; var curNote = 0; var curTempo = 100; // ===== FUNCTIONS ===== // playTune: Play the next note! function playTune() { if (isPlaying !== false) { var nextNote = 60000 / curTempo / 4; // Turn off all lights on the tracker's row $("#tracker li.track").removeClass("active"); // Light up the tracker on the current track $("#tracker li.track.col_" + curNote).addClass("active"); // Find each active note, play it var tmpAudio; $(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){ tmpAudio = document.getElementById($(this).data('sound_id')); if (!tmpAudio.paused) { // Pause and reset it tmpAudio.pause(); tmpAudio.currentTime = 0.0; } tmpAudio.play(); }); // Move the track forward curNote = (curNote + 1) % 16; } // if (isPlaying) } // playTune // Make a new hash function buildHash() { // Start it var newhash = ''; // For each track, check and add in a 0/1 as appropriate $(".playBar[id^=control] li.track").each(function(i){ newhash += $(this).is('.active') ? '1' : '0'; }); // Separate it newhash += '|'; // Now, toss in the note newhash += $('#temposlider').slider('value'); // Check and see if we really need to update if (location.hash != '#' + newhash) location.hash = newhash; } // buildHash // Read in our hash function parseHash() { if (location.hash.length > 0) { // Split it up, work it out, removing the actual hashmark var pieces = location.hash.substring(1).split('|'); // Set the lights var lights = pieces[0]; $(".playBar[id^=control] li.track").each(function(i){ // Make sure we haven't exceeded if (i >= lights.length) return false; // Check our location, turn on class if need be if (lights.charAt(i) == '1') { $(this).addClass('active'); } }); // Set the tempo if (typeof pieces[1] !== 'undefined') { $('#temposlider').slider('value', parseInt(pieces[1])); $('#tempovalue').innerHTML = pieces[1]; curTempo = parseInt(pieces[1]); } } } // parseHash // Clear it! function clearAll() { $(".playBar[id^=control] li.active").removeClass('active'); } // Run on DOM ready $(document).ready(function(){ // Process each of the audio items, creating a playlist sort of setup $("audio").each(function(i){ // Make a self reference for ease of use in click events var self = this; // Make a sub-list for our control var $ul = $('<ul id="control_' + this.id + '" class="playBar">'); $ul.append('<li class="header">' + this.title + '</li>'); // Add 16 list items! for (j = 0; j < 16; j++) { var $li = $('<li class="track col_'+j+'">'+self.id+'</li>') .click(function(){ $(this).toggleClass('active'); buildHash(); }) .data('sound_id', self.id); $ul.append($li); } // for (i = 0; i < 16; i++) // Append it up $('<li>').append($ul).appendTo('#lights'); }); // Bind up a click for our button $("#soundstart").click(function(){ if (isPlaying === false) { // Start the playing! curNote = 0; isPlaying = setInterval(playTune, 60000 / curTempo / 4); // Change our display this.innerHTML = "Stop"; } else { clearInterval(isPlaying); isPlaying = false; $("#tracker li.track").removeClass("active"); $("audio").each(function(){ this.pause(); this.currentTime = 0.0; }); this.innerHTML = "Play"; } }); $('#clearall').click(clearAll); $('#reload').click(parseHash); // ===== Misc ===== // Build or read the hash if (location.hash == '') { // I was building this at load - but now, no, just to be safe //buildHash(); } else { parseHash(); } // Show our value, now that we've built off of the hash $('#tempovalue').html(curTempo); // Make our tempo slider $('#temposlider').slider({ 'value': curTempo, 'min': 30, 'max': 170, 'step': 2, 'slide': function(e, ui) { curTempo = ui.value; $('#tempovalue').html(curTempo); if (isPlaying !== false) { clearInterval(isPlaying); isPlaying = setInterval(playTune, 60000 / curTempo / 4); } }, 'stop': function(e, ui) { buildHash(); } }); }); How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5 Code: <audio controls="controls"> <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" /> <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> THANKS!!!! 1. I previously made some pages in which had audio controls which worked when I actually ran them. However I have now moved these pages to another folder location but now they do not work, when I run the page the buttons appear as if they have already been clicked and appear "stuck", i've tried to manually change the URL location of the audio file my self and the button becomes "unstuck and I can press it but still I hear no audio. I would like to know if possible what is going on The controller settings with url before I changed it- <embed src="../Sounds/home_page_readout.wma" width="405" hidden="false" height="39" autoplay="false" controller="true"></embed> 2. Secondly I would like to know how to get different media formats to work on different browsers. I have a simple mobile app designed using PhoneGap. I am some mp3 in it and I am using the Media plugin of PhoneGap. Everything is working fine, the audio is playing and so on. The issue, I noticed after playing 8-12 times, the audio stops playing. I do not get sound. Here are my codes: Code: <script> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() {} // Audio player var media = null; var audioP = false; // Play audio function playAudio(src) { if (audioP === false) { media = new Media(src, onSuccess, onError); media.play(); audioP = true; } else { media.release(); } } // onSuccess Callback function onSuccess() { console.log("playAudio():Audio Success"); audioP = false; } // onError Callback function onError(error) {} </script> Help! I put together a custom audio player using code from a few players. http://66.147.244.101/~fastlif2/wp-c...mp3player.html The player works in CHROME perfectly. The AUDIO tag supports mp3's in Chrome. However, there are compatibility issues in other browers. The audio tag works in FireFox, but only with ogg files (which I don't have). And IE is pretty useless. So, I need to have the player play in Chrome normally (as it is now). If the browser does not support mp3s or the audio tag, I want to default to my Flash player. And, if flash isn't supported, then I want to have a download link. I thought that if the browser didn't support the audio tag, it would default to the embed code that I have listed in there ... but it isn't working. Odd. Any idea what is wrong? Since I am not a strong javascript programmer, I need some way to check this. Also, there is so much javascript, the I am very hesitant to play with the code anymore (as I may mess it up). Please help I want to use HTML5's audio coding similar to the one below: Code: var audioElement = document.createElement('audio'); audioElement.setAttribute('src', 'horse.ogg'); audioElement.play(); In order to play sound files depending on the input. What I'm working on is a text-to-speech webapplication. What I'd need to happen is for there to be an input and then allow the user to type anything into the input, so if they type in: Hello, how are you doing? Javascript or PHP will recognize each character and translate it into an audio sequence. In example: It'd detect the "H" in hello and play sound file "H.ogg" It'd then detect the "E" in hello and play sound file "E.ogg" I know there must be an easy way to do this. Hello to all, Can anyone please assist in the following?: I have an embed code that needs to play only the first 10 seconds of an mp3 or audio file <EMBED SRC="clip.mp3" WIDTH=144 HEIGHT=60 STARTTIME="00:00" ENDTIME="00:10" > Unfortunately all the MP3 is getting streamed and the the STARTTIME and ENDTIME work on Netscape only Is there any way to stop an audio file from streaming after a number of seconds? If there is a way to crop the mp3 during the upload process, I would appreciate your help in this direction Thanks Simon I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below. http://cetus.ucsd.edu/voicesinthesea.../humpback.html I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom. Thank you! Hi, I have a webpage that needs to play a different mp3 file each day of the month from a javascript controlled html5 audio tag. I have the files on the server, and each filename ends with a number 1 through 31 (filename30.mp3, filename31.mp3 etc.). Because javascript can easily give me the date for each day, how can I insert this date like... src="filename[date].mp3" within the audio tag? Inserting a date with javascript is easy for text on a webpage, but I am not sure how to produce this in html code that is yet to be rendered. Here is the relevant portion of the html that I need the date to be inserted into: Code: <audio src="filename[need date here].mp3" id="audio"></audio> <input type="range" step="any" id="seekbar"></input> Many thanks for any help! Hi, am developeing application in java. here wat i have to do is to highlight words in html file. ie) i have one html file and same content in audio file. when i open the html file audio should play n it should highlight the word in html file on which audio plays. for eg) i have html file with content " hello world". i have same audio file saying "hello world". now when i open html file and click audio, and if audio says hello, hello should highlight in html file, then audio says world, world should highlight in html file. how to do this. can u please suggest some idea. thanks. I'm using VS2008Pro with Master pages. On a child page, I have a modalPopupExtender that calls a panel with an embedded Google video. Everything works great - the popup appears with the video, background greyed. But, when I close the panel, the audio keeps playing in IE 7 & 8. Netscape is fine. I went and tried what Google recommended, but it still continues. Any ideas? Code: '//In child page header <script src="../swfObject/swfobject.js" type="text/javascript"></script> <script type="text/javascript"> var params = { allowScriptAccess: "always" }; var atts = { id: "myytplayer", name: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/e/GtHDrLngXlc?enablejsapi=1&playerapiid=myytplayer", "myytplayer", "425", "344", "8", null, null, params, atts); function stopVideo() { var playerObj = document.getElementById("myytplayer"); if (playerObj) { playerObj.stopVideo(); playerObj.clearVideo(); } } </script> '//in child page html <asp:ImageButton ID="imgBtnAmanda" runat="server" ImageAlign="Middle" ImageUrl="~/media/quality/devMedAmanda.jpg" /> <asp:Panel ID="pnlAmanda" runat="server" CssClass="modalPopup"> <asp:ImageButton ID="imgBtnCloseAmanda" runat="server" ImageUrl="~/images/icon-x.gif" ImageAlign="Right" /><br /><p align="center"> <div id="myytplayer" name="myytplayer" style="width:425px; height:344px;">You need Flash player 8+ and JavaScript enabled to view this video.</div> <br /><br />Amanda Levesque's performance of "To Dream the Impossible Dream"</p></asp:Panel> <ajaxToolkit:ModalPopupExtender ID="modalAmanda" runat="server" TargetControlID="imgBtnAmanda" PopupControlID="pnlAmanda" BackgroundCssClass="modalBackground" CancelControlID="imgBtnCloseAmanda" OkControlID="imgBtnCloseAmanda" OnOkScript="stopVideo;" onCancelScript="stopVideo;" /> </p> I am using a javascript audio player on a webpage that has an option to download the track by right clicking on a link called 'mp3' at the end of each track in the playlist. When the user right clicks on the track name however all that can be downloaded is an html file. I am trying to find a way of changing this so that right clicking on the track and choosing the 'save link as' option will download the mp3. I have been led to believe that I can use a script such as this one: http://abeautifulsite.net/blog/2008/...-click-plugin/ to generate a custom content menu for downloading tracks, or somehow downloading the mp3, but I am at a loss at to how to do this. Here's a screenshot of a track in the playlist: And here is the source: Code: {name:"foster manganyi na tintsumi ta tilo - zion (ndzi teke riendzo no. 1) <span style=\"color:#BDBDA1; font-size:12px;\">[from nick]</span>",mp3:"./songs//nick/zion.mp3"} I would be grateful for any advice on getting this working, Thanks, Nick |