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

Add a border to the 'contenteditable' class in a Bootstrap table after it has been modified

Steps for loading a different local JavaScript file by clicking on a button

I possess information stored within the array object below, and I aim to transform it into a different array object format

"Implement image uploading and retrieval functionality in your application by utilizing Parse and Back4App with the help of Node

What is the process for retrieving the AJAX response text?

The JavaScript code is not executing properly within the HTML document

In an Electron-React-Typescript-Webpack application, it is important to note that the target is not a DOM

What are the various undisclosed schema types in A-Frame?

Issue with Repeated String Test in JavaScript: Single Failure Detected

Difficulties with validating phone numbers

Ways to reduce the amount of time spent watching anime when it is not in view

Decoding JavaScript content with Python

Is there a way to automate the loading process when a file is uploaded to an HTML input field?

Escaping back slashes in Node.js

The jQuery script operates just one time

Using Node.js to create a RESTful API that pulls information from MongoDB

What is the reason for all the buttons activating the same component instead of triggering separate components for each button?

Guide on adding a new member to Mailchimp through node.js and express

A comprehensive guide on creating a package that combines an href link with an <li> element

How to show the current week using React Native