1

I've been googling this for the last couple weeks and have read several things on here that are close to what I'm trying to do but since I'm not too good with javascript, I'm having a hard time figuring out how to implement them.

I have an audio tag that will play a different audio file based on the day of the month. So when you click play it should play the file for that particular day using the audio player.

Here's my audio tag: 

<audio preload="metadata" controls="controls" src="" id="todays" autoplay="none"></audio>

Here is my .js:

function todaywm() {
    var a, dayofmonth
    a = new Date()
    dayofmonth = a.getDate()
    document.getElementById('todays').src = radiolinks[dayofmonth]
}
var radiolinks = new Array(31) 
radiolinks[1] = "audio/day01.mp3"
radiolinks[2] = "audio/day02.mp3"
radiolinks[3] = "audio/day03.mp3"
radiolinks[4] = "audio/day04.mp3"
radiolinks[5] = "audio/day05.mp3"
radiolinks[6] = "audio/day06.mp3"
radiolinks[7] = "audio/day07.mp3"
radiolinks[8] = "audio/day08.mp3"
radiolinks[9] = "audio/day09.mp3"
radiolinks[10] = "audio/day10.mp3"
radiolinks[11] = "audio/day11.mp3"
radiolinks[12] = "audio/day12.mp3"
radiolinks[13] = "audio/day13.mp3"
radiolinks[14] = "audio/day14.mp3"
radiolinks[15] = "audio/day15.mp3"
radiolinks[16] = "audio/day16.mp3"
radiolinks[17] = "audio/day17.mp3"
radiolinks[18] = "audio/day18.mp3"
radiolinks[19] = "audio/day19.mp3"
radiolinks[20] = "audio/day20.mp3"
radiolinks[21] = "audio/day21.mp3"
radiolinks[22] = "audio/day22.mp3"
radiolinks[23] = "audio/day23.mp3"
radiolinks[24] = "audio/day24.mp3"
radiolinks[25] = "audio/day25.mp3"
radiolinks[26] = "audio/day26.mp3"
radiolinks[27] = "audio/day27.mp3"
radiolinks[28] = "audio/day28.mp3"
radiolinks[29] = "audio/day29.mp3"
radiolinks[30] = "audio/day30.mp3"
radiolinks[31] = "audio/day31.mp3"

But I'm just not able to get it to work. I'm still learning javascript.

Carolyn
  • 67
  • 1
  • 6
  • It shouldn't make any difference but place the function after the array list. – jeff Jan 19 '16 at 00:36
  • @Carolyn are you calling the function? You've got it defined, but it doesn't look like you're running it anywhere. If you put `todaywm();` on its own line, at the bottom of that list, does it do what it says it will? You might also consider opening the developer tools in your browser, and looking at the console for any errors, which halt the program before getting far enough. – Norguard Jan 19 '16 at 05:25

4 Answers4

1

Update v.2

Second version of audio player will accept a properly formed Array Literal and plays the coresponding position in relation to the day of the month. I have included a form that will accept relevant data to generate an array literal for you as well.

dailyAudio Player

Playlist Array Generator

If you have all 31 files already, you don't need to use an array, it's easier to manipulate the 2 digits of your path to the files. Make sure that your webpage and mp3 files are in the correct folder (directory) of your server.

Example:

  • Webpage location: http://www.domain.com/path/to/index.html

  • Song day 28 location: http://www.domain.com/path/to/audio/day28.mp3

  • Song day 1 location: http://www.domain.com/path/to/audio/day01.mp3

Here's a working demo: http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview

In order to run it:

  1. Fork it.
  2. Go to the file dailySong.js
  3. Comment line 13 (Place "//" at the beginning of line 13)
  4. Uncomment line 17 (Delete "//" at the beginning of line 17)
  5. Line 17 can only play on day 18, 19, & 20 of the month.

The snippet below doesn't work because it's sandboxed too strictly. So just go to http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview and follow the directions if you want to test it.

function nowPlaying() {
  var player = document.getElementById('dailySong');
  var obj, dayOfMonth, X;
  obj = new Date();
  dayOfMonth = obj.getDate();
  X = pad(dayOfMonth, 2); //:::::............. This is to ensure that numbers under 10 get that extra 0 padding.
  player.src = "audio/day" + X + ".mp3"; //:::::........This concats X to a string that will be assigned to src
  player.load(); //:::::.................When changing src, you must .load() the player before you can play.
}

// This utility function is to pad numbers less than 10
// https://stackoverflow.com/a/30387967/2813224
function pad(num, len) {
  return '0'.repeat(len - num.toString().length) + num;
}

//When the page has completely loaded, start nowPlaying function.
window.onload = nowPlaying;
h1 {
  font-size: 2rem;
  color: red;
}
<audio preload="metadata" controls="controls" src="" id="dailySong" autoplay="none"></audio>
<h1>Do not expect this demo to work, snippets are sandboxed too strictly, follow the directions to test the demo at: <br/><a href="http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview" target="_blank">http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview</a></h1>
Community
  • 1
  • 1
zer00ne
  • 31,838
  • 5
  • 32
  • 53
  • I actually will have different mp3 files in the array every month, the files I put there were just an example of what I'm trying to do. so I have to keep the array of each day. But using your example I was able to make it work but it autoplays as soon as the page loads. how can I stop it from autoplaying. I only want it to play when a user clicks play. – Carolyn Jan 19 '16 at 09:37
  • Oh I got it to work!! I just added player.pause(); after player.load(); in the function nowPlaying(). – Carolyn Jan 19 '16 at 09:53
  • Great, I'm glad you groked it. So an array is essential, ok, I have an old project that uses an array as a parameter.If your'e interested, let me know. – zer00ne Jan 19 '16 at 19:19
  • oh yeah sure i'd be interested. – Carolyn Jan 19 '16 at 19:40
  • Ok, I got a question, do you plan to have different locations and/or file names within the array? – zer00ne Jan 19 '16 at 20:34
  • same main location but different folders. so url.com/onemp3folder/severalmp3files_01.mp3, then url.com/anothermp3folder/serveralmoremp3files_01.mp3, etc. – Carolyn Jan 20 '16 at 09:18
  • @Carolyn Ok, it's updated. 2nd version will accept a properly formed [Array Literal](http://stackoverflow.com/a/1094734/2813224) and plays the coresponding position in relation to the day of the month. I have included a form that will accept relevant data to generate an array literal for you as well. Good luck. :-) – zer00ne Jan 21 '16 at 13:17
  • @Carolyn Your welcome very much. Don't forget to click the green checkmark if my demos helped you resolve your issues. :-) – zer00ne Jan 22 '16 at 11:45
  • this script is still working great for me...but was just wondering if you by chance know of a way I can show the title of the file that is playing for that day. I'm assuming I was use javascript somehow to pull the mp3 file's id3 title? all I really want to show is just the title. is that possible? – Carolyn Feb 29 '16 at 10:40
  • @Carolyn Glad to hear your project is running fine. Yes, it's possible, but I'll need to know how the content is provided to the user. Like how the UI is structured, so I know what I can use as a hook or what options are available. Or I can think up something on only what I remember or assume to remember...anyways, as always I'll be happy to help.:-) – zer00ne Feb 29 '16 at 13:37
  • sorry I had to jump to another project and totally forgot about this. So you just need the html code where the audio file is? code is below – Carolyn Mar 22 '16 at 09:16
0

Did you put the ';' on end each line?

dsandrade
  • 386
  • 4
  • 7
0

The script looks fine (; is not compulsory at the end of each statement, but highly recommended), so you may have a problem with the location of the mp3s. Are they in a folder "audio" relative to the script's location?

feiss
  • 106
  • 4
0

@zer00ne here's my code for the audio player. I'm using the Foundation Framework:

<div id="todayModal" class="reveal-modal tiny" data-reveal aria-labelledby="todays-broadcast" aria-hidden="true" role="dialog">
    <script type="text/javascript" src="js/today.js"></script>
    <h3 id="todays-broadcast" class="text-center">Today's Broadcast</h3>
    <div class="audio-player"><audio preload="auto" controls="controls" id="todays" src=""></audio></div>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
Carolyn
  • 67
  • 1
  • 6