CODEWITHSUNDEEP
javascriptaudiosrc
Carolyn
Carolyn

Reputation: 67

Trying to change the src of audio tag using javascript

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.

Upvotes: 1

Views: 425

Answers (4)

Carolyn
Carolyn

Reputation: 67

@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>

Upvotes: 0

zer00ne
zer00ne

Reputation: 43863

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>

Upvotes: 1

feiss
feiss

Reputation: 156

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?

Upvotes: 0

dsandrade
dsandrade

Reputation: 586

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

Upvotes: 0

Related Questions