JavaScript - I Need To Create Dynamic Mp3 Filenames Inside A Html5 Audio Tag
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! Similar TutorialsHi, 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 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!!!! hi, I have a code to create a dynamic textboxes in html. But i wanna give ID to each controls to retreieve data from textboxes. How do make this??? here is my code, <script language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell3 = row.insertCell(0); var element2 = document.createElement("input"); element2.type = "text"; cell3.appendChild(element2); } </script> <body> <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <TABLE id="dataTable" width="350px" border="1"> <TR> <TD> <INPUT type="text" /> </TD> </TR> </TABLE> </body> help me any one.. Thanks in advance. Hi everyone, i am stuck at a problem. i am trying to craete a redimmensionable array using javascript, is there a way to do this, i know that this can be done in vbscript using redim and preserve commands. If not then is it possible to variables between javascript and vbscript, or call vbscript function using javascript. a sample code will be much aprreciated thanks for your time! J I have a javascript that loads images on the page based on the date you select from a drop down menu. So the images are displayed dynamically, however they are numbered 1 through 20. Is there a way I can add a title tag to the images that will display on mouseover? Here's the page I am working on. I want to add title tags to the six images on the right side of the page. They change based on the date selected. webpage Thanks. From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I want to know how to move a character on the path when you click the left or right arrow, but also when the left arrow is clicked it will switch between 4 images, making it look as though the characters is actually walking left arrow = moves character to left on the path(walks to the left) right arrow = moves character to right on the path(walks to the right) up arrow = character jumps This is my original code, it draws a path something like this \____ ........................................................................................\ Code: function drawMap(){ // get the canvas element using the DOM var canvas = document.getElementById('map'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Stroked Path ctx.beginPath(); ctx.moveTo(0,70); ctx.lineTo(45,115); ctx.lineTo(250,115); ctx.lineTo(300,135); ctx.stroke(); ctx.closePath(); } else { alert('Your broswer does not support Canvas, We recommend getting the latest version of google chrome for the best quality'); } } Can anyone point me in the right direction? Heya 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?? I'm keen to know what you guys think of this. In order to have HTML5 semantics and support for older browsers without Javascript enable I've written a little script that changes classes into node. For example <div class="nav"> would become <nav class="nav"> Code: //Adapt page to HTML5 function changeNodeName(element, newNodeName) { var oldNode = element, newNode = document.createElement(newNodeName), node, nextNode; node = oldNode.firstChild; while (node) { nextNode = node.nextSibling; newNode.appendChild(node); node = nextNode; } for (var i = 0; i < oldNode.attributes.length; i++) { newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value); } oldNode.parentNode.replaceChild(newNode, oldNode); } try { var theBody = document.getElementsByTagName("body")[0]; var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"]; for (var i = 0; i < classNames.length; i++) { htmlFourElements = document.getElementsByClassName(classNames[i], theBody); for (var ii = 0; ii < htmlFourElements.length; ii++) { changeNodeName(htmlFourElements[ii], classNames[i]); } } } catch(e) { console.error(e.message); } Let me know what you think I want to have an example on web storage. I have an index.html page. On this page, there is a button which will go to another page, that is page1.html. On this page now, there is another button which will go to page2.html if clicked. Index.html > page1.html > page2.html Suppose if a user has already visited page2.html on the first time, how to make him/her goes directly on page2.html after clicking the button on index.html? The user must not again go to page1.html to get page2.html because he/she has already done that. I want to know how to store page sessions with HTML5 so that the user gets on his/her last visited page when he/she clicks the button. Thank. 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!
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 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! 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 |