Attempting to modify the audio tag's src attribute with JavaScript

Question

Attempting to modify the audio tag's src attribute with JavaScript

I've been doing online research for the past few weeks and have come across similar solutions to what I'm trying to achieve. However, due to my limited knowledge of javascript, I am struggling to implement them effectively.

My goal is to have an audio tag that plays a different audio file depending on the day of the month. Essentially, when clicking play, the corresponding file for that specific day should be played using the audio player.

Below is my current audio tag:

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

This is the JavaScript code I'm using:

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"
// etc...
radiolinks[29] = "audio/day29.mp3"
radiolinks[30] = "audio/day30.mp3"
radiolinks[31] = "audio/day31.mp3"

Despite my efforts, I have not been successful in making it work as intended. I'm still relatively new to javascript and learning as I go.

javascript audio src

Answer 1

Answer №1

New Update: Version 2

The second version of the audio player now supports a properly formatted Array Literal and plays the corresponding position based on the day of the month. Additionally, there is a form included that allows you to input data and generate an array literal.

Try out the dailyAudio Player here

Generate Playlist Array here

If you already have all 31 files, there is no need to use an array. You can manipulate the 2 digits in your file paths for easier access. Ensure that both your webpage and mp3 files are in the correct folder on your server.

For example:

Webpage location:

http://www.domain.com/path/to/index.html

Song for day 28 location:

http://www.domain.com/path/to/audio/day28.mp3

Song for day 1 location:

http://www.domain.com/path/to/audio/day01.mp3

Check out a working demo here: Demo Link

To test it:

Fork the project.
Navigate to the file dailySong.js
Comment out line 13 (Place "//" at the beginning of line 13)
Uncomment line 17 (Remove "//" from the beginning of line 17)
Line 17 plays music only on days 18, 19, & 20 of the month.

Note: The code snippet below won't work due to strict sandboxing. Visit this link for testing instructions.

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;
}

//Start playing when the page has loaded completely.
window.onload = nowPlaying;

h1 {
  font-size: 2rem;
  color: red;
}

<audio preload="metadata" controls="controls" src="" id="dailySong" autoplay="none"></audio>
<h1>The demo may not work due to stringent sandbox rules in snippets. Follow the testing instructions provided at: <br/><a href="http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview" target="_blank">http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview</a></h1>

Answer 2

New Update: Version 2

The second version of the audio player now supports a properly formatted Array Literal and plays the corresponding position based on the day of the month. Additionally, there is a form included that allows you to input data and generate an array literal.

Try out the dailyAudio Player here

Generate Playlist Array here

If you already have all 31 files, there is no need to use an array. You can manipulate the 2 digits in your file paths for easier access. Ensure that both your webpage and mp3 files are in the correct folder on your server.

For example:

Webpage location:

http://www.domain.com/path/to/index.html

Song for day 28 location:

http://www.domain.com/path/to/audio/day28.mp3

Song for day 1 location:

http://www.domain.com/path/to/audio/day01.mp3

Check out a working demo here: Demo Link

To test it:

Fork the project.
Navigate to the file dailySong.js
Comment out line 13 (Place "//" at the beginning of line 13)
Uncomment line 17 (Remove "//" from the beginning of line 17)
Line 17 plays music only on days 18, 19, & 20 of the month.

Note: The code snippet below won't work due to strict sandboxing. Visit this link for testing instructions.

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;
}

//Start playing when the page has loaded completely.
window.onload = nowPlaying;

h1 {
  font-size: 2rem;
  color: red;
}

<audio preload="metadata" controls="controls" src="" id="dailySong" autoplay="none"></audio>
<h1>The demo may not work due to stringent sandbox rules in snippets. Follow the testing instructions provided at: <br/><a href="http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview" target="_blank">http://plnkr.co/edit/vzvOD0XIi61qfVAASWub?p=preview</a></h1>

Answer 3

Answer №2

Have you remembered to add a semicolon at the end of each line?

Answer 4

Have you remembered to add a semicolon at the end of each line?

Answer 5

Answer №3

While it's not mandatory to include a semicolon at the end of each statement, I highly recommend it as good practice! Additionally, if you're encountering issues with the script, please check if the mp3 files are located in a folder named "audio" relative to where the script is placed.

Answer 6

While it's not mandatory to include a semicolon at the end of each statement, I highly recommend it as good practice! Additionally, if you're encountering issues with the script, please check if the mp3 files are located in a folder named "audio" relative to where the script is placed.

Answer 7

Answer №4

Hey @zer00ne, check out the code I wrote for my custom audio player using the Foundation Framework:

<div id="customModal" class="reveal-modal tiny" data-reveal aria-labelledby="custom-broadcast" aria-hidden="true" role="dialog">
    <script type="text/javascript" src="js/custom.js"></script>
    <h3 id="custom-broadcast" class="text-center">Custom Broadcast</h3>
    <div class="audio-player"><audio preload="auto" controls="controls" id="custom" src=""></audio></div>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Answer 8

Hey @zer00ne, check out the code I wrote for my custom audio player using the Foundation Framework:

<div id="customModal" class="reveal-modal tiny" data-reveal aria-labelledby="custom-broadcast" aria-hidden="true" role="dialog">
    <script type="text/javascript" src="js/custom.js"></script>
    <h3 id="custom-broadcast" class="text-center">Custom Broadcast</h3>
    <div class="audio-player"><audio preload="auto" controls="controls" id="custom" src=""></audio></div>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Attempting to modify the audio tag's src attribute with JavaScript

Answer №1

New Update: Version 2

Answer №2

Answer №3

Answer №4

Similar questions

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

Encountering an error when trying to destructure a property of null

How can we use Cypress to check if we are at the final slide in the presentation?

Angular Leaflet area selection feature

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

Create an Android application using Node.js

Transform Promise-based code to use async/await

Unable to retrieve information from the JSON object

Is there a way to make res.render in node.js/express/mongo wait until the database search is finished before loading?

How to pass data/props to a dynamic page in NextJS?

A function injected into a constructor of a class causes an undefined error

What could be causing the template UI to not display the Vue data?

The JavaScript setTimeout function not triggering repetitively for 10 instances

Transform a group of objects in Typescript into a new object with a modified structure

Is it feasible for a form button to perform multiple actions simultaneously?

Learn how to use jQuery to load a text file containing arrays and then format them as

Is Formik Compatible with TextareaAutosize?

CSS margin-left causing issues in Chrome Extension

Error: The variable "details.date.getTime" is not defined and cannot be accessed

Does Next.js pre-render every page, or does it only pre-render the initial page?