PDA

View Full Version : I need to create dynamic mp3 filenames inside a html5 audio tag



creedifee
02-15-2012, 07:52 AM
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:


<audio src="filename[need date here].mp3" id="audio"></audio>
<input type="range" step="any" id="seekbar"></input>

Many thanks for any help!

devnull69
02-15-2012, 08:11 AM
You were unclear at one important point

- html code that is yet to be rendered (this tells me that Javascript inserts the code)
- html that I need the date to be inserted into (this tells me that the HTML is already there and Javascript needs to update the DOM with the new filename)

Which one of these is true? Are both true (Javascript initially inserts the HTML and then needs to continuously update it)?

creedifee
02-15-2012, 02:43 PM
Thanks for your help.

Your second description is correct. The html is already there, but just needs to be updated.

devnull69
02-15-2012, 03:38 PM
In that case


var currentDay = (new Date()).getDate();
document.getElementById('audio').src = "filename" + currentDay + ".mp3";

creedifee
02-16-2012, 03:10 AM
Thanks devnull69.

I have tried, but just need a little help putting it together now. I am not sure how to get the output from the code you gave me into the audio tag. Here is what I have:



<body>
<script type="text/javascript">
var currentDay = (new Date()).getDate();
document.getElementById('audio').src = "filename" + currentDay + ".mp3";
</script>

<div style="text-align:center">
<audio 'audio' id="audio"></audio>
<input type="range" step="any" id="seekbar"></input>

<script>
seekbar.value = 0;
var audio = document.getElementById("audio");

var seekbar = document.getElementById('seekbar');
function setupSeekbar() {
seekbar.min = audio.startTime;
seekbar.max = audio.startTime + audio.duration;
}
audio.ondurationchange = setupSeekbar;

function seekAudio() {
audio.currentTime = seekbar.value;
}

function updateUI() {
var lastBuffered = audio.buffered.end(audio.buffered.length-1);
seekbar.min = audio.startTime;
seekbar.max = lastBuffered;
seekbar.value = audio.currentTime;
}

seekbar.onchange = seekAudio;
audio.ontimeupdate = updateUI;
audio.addEventListener('durationchange', setupSeekbar);
audio.addEventListener('timeupdate', updateUI);
oAudio.addEventListener("timeupdate", progressBar, true);
</script>

<p>
<button type="button" onclick="audio.play();">Play</button>
<button type="button" onclick="audio.pause();">Pause</button>
<button type="button" onclick="audio.currentTime = 0;">Rewind</button>
</p>
</div>
</body>


I appreciate your input.

creedifee
02-16-2012, 05:13 AM
Got it working after a helpful PM that showed me how to arrange my script properly and insert the variable. Hopefully the following code may help someone.



<body>
<div style="text-align:center">

<audio id="audio" src=" "></audio>
<input type="range" step="any" id="seekbar"></input>

<script type="text/javascript">

var currentDay = (new Date()).getDate();
document.getElementById('audio').src = "proverbs" + currentDay + ".mp4"

seekbar.value = 0;
var audio = document.getElementById("audio");

var seekbar = document.getElementById('seekbar');
function setupSeekbar() {
seekbar.min = audio.startTime;
seekbar.max = audio.startTime + audio.duration;
}
audio.ondurationchange = setupSeekbar;

function seekAudio() {
audio.currentTime = seekbar.value;
}

function updateUI() {
var lastBuffered = audio.buffered.end(audio.buffered.length-1);
seekbar.min = audio.startTime;
seekbar.max = lastBuffered;
seekbar.value = audio.currentTime;
}

seekbar.onchange = seekAudio;
audio.ontimeupdate = updateUI;
audio.addEventListener('durationchange', setupSeekbar);
audio.addEventListener('timeupdate', updateUI);
oAudio.addEventListener("timeupdate", progressBar, true);
</script>

<p>
<button type="button" onclick="audio.play();">Play</button>
<button type="button" onclick="audio.pause();">Pause</button>
<button type="button" onclick="audio.currentTime = 0;">Rewind</button>
</p>
</div>
</body>

devnull69
02-16-2012, 07:51 AM
Ok granted ... I couldn't know that filenameXXX.mp3 was actually supposed to be proverbsXXX.mp4 :-)

creedifee
02-16-2012, 02:20 PM
Thanks so much for your help devnull69. I had just used generic filenames in my question to keep it simple.

Your code was exactly what I was looking for. It saved me from creating 31 separate html pages as a workaround!

Thanks again for your kind help.