Looking for way to trigger a MP3 player to play songs simply by clicking on them using an <a> tag?

I created a selection of songs in my <a> tags and I am looking to implement a universal mp3 player that will play the selected song without needing to refresh the page or open it in a new tab. I want the song to play directly on the player when clicked on from the list.

Below is the HTML code:

<audio preload="auto" src="#"></audio>

<a class="trigger" href="#" data-src="audio/song1.mp3">Song #1</a>
<a class="trigger" href="#" data-src="audio/song2.mp3">Song #2</a>
<a class="trigger" href="#" data-src="audio/song3.mp3">Song #3</a>
<a class="trigger" href="#" data-src="audio/song4.mp3">Song #4</a>
jqueryhtmlcssaudiomedia-player

Answer №1

If you've added the jQuery tag to your question, you're in luck! You can easily utilize jQuery to assign the src attribute to your audio element. It's as simple as the following code snippet:

$('a').on('click', function () {
    $('audio').prop('src', $(this).data('src'));
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

Recently stumbled upon a fascinating website called "3D Meninas", showcasing an impressive 3D animation effect. Upon examining the HTML code, I noticed there was no mention of any <script> tags or events, leading me to believe that it operates solely ...

htmlcssanimation3d

Various Plus/Minus Containers

One issue I am facing is that when using multiple counters on the same page, my - and + buttons to decrease or increase the number in a text box do not function properly. The script provided below works for one counter. How can I modify this code so that ...

javascriptjqueryhtml

Traversing through an array and populating a dropdown menu in Angular

Alright, here's the scoop on my dataset: people = [ { name: "Bob", age: "27", occupation: "Painter" }, { name: "Barry", age: "35", occupation: "Shop Assistant" }, { name: "Marvin", a ...

javascripthtmlangulartypescript

Sleek Navigation with Sticky Header

My dilemma lies in the fact that I have a one-page website with a sticky menu (#main-menu) fixed in place. When I click on the "About" link in the menu, the page should scroll smoothly to the #about section, as shown in the first image. In Image Two, howe ...

jquerysmooth-scrolling

Using JavaScript to open links in a new tab with the target

document.getElementById("mahacareer").onclick = function () { window.open("http://www.mahacareermitra.in", '_blank'); }; <a href="" id="mahacareer">Access the portal</a> Hi there, I am looking to have the link above open in a new tab ...

javascriptjqueryhtmltwitter-bootstrapcss

When using the resize property in monaco-editor, it may result in editor popups being obscured or

My current task involves utilizing the deltaDecorations method to display errors in my editor. Feel free to check out my code here: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810 Below is the output: https://i.sstatic.net/Dtj9A.png ...

htmlcssmonaco-editor

Troubleshooting Owl Carousel's width problems upon initial loading

Currently, I am utilizing the Owl Carousel and have the following script: $("#owl-demo").owlCarousel({ items : 3 }); My intention is for the container to display 3 images. However, upon initial load, this is what appears: https://i.sstatic.net/ePLAQ. ...

jquerycsscarouselowl-carousel

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

javascripthtmlangularjstwitter-bootstrapmean-stack

Issues with validation preventing PHP contact form from functioning correctly

Issue encountered as nothing I attempted seemed to be effective. Tried my own script, experimented with various solutions found on Google, but alas, nothing worked. The closest success I achieved was receiving empty emails from the latest version. Any insi ...

phpjquerycontact-form

Eliminating the admin-bar.php styling in a WordPress theme

Currently, I am working on developing my very first WordPress template. I have encountered an issue with the top navigation being pushed down by a specific style rule: html { margin-top: 32px !important; } After investigating further, I discovered that t ...

phphtmlcsswordpress

When using the $.ajax() function, the entire webpage is returned, and unfortunately, it is unable to delete

Is there a problem deleting a row from records using ajax? The $.ajax() function seems to be returning the whole page instead of just deleting the row. Html code <tbody> <tr class="gradeX odd"> <td class="sorting_1">2</ ...

phpjqueryajax

I am looking to save a collection of variables in an array and store it as a $_SESSION variable

Looking to store an array of variables as a $_SESSION variable in order to use it in another .PHP file and perform operations with it. The array: <script> var idArray = [18, 28, 31, 38, 41]; </script> What I attempted, but didn't suc ...

javascriptphpjqueryjson

What is the appropriate method for passing parameters in PHP and how can you handle returned empty values

I'm looking to pass parameters in the action method because I am unable to do so via the header. <form name="mailinglist1" method="post" action="report1.php" > In this form, I'm using a download button to connect my report (HTML). ...

phphtmlcodeigniter

Having trouble adjusting the space between the footer and the bottom of the page

Looking to create a footer using multiple elements The first element should be positioned at: left: 944px; top: 9749px; The second element should be positioned at: left: 715px; top: 9819px; The third element should be positioned at: left: 718px; top: ...

htmlcssposition

Display sourcemaps on Chrome's network panel

Recently, I began utilizing source maps for my SASS code in order to debug more efficiently in Chrome. My understanding was that Chrome should request both the stylesheet resource and the .map resource, however, only the stylesheet is visible in the netwo ...

cssgoogle-chromesasssource-maps

Is there a way to retrieve the parent window's domain in a child window (opened with window.open) when both windows are located on different

Can anyone offer assistance with cross-domain communication between windows? Looking to use window.open(); function. ...

javascriptjquery

Assign a JavaScript variable upon clicking a polygon on Mapbox

I have a MapBox map that consists of approximately 800 polygons representing census tracts, created using TileMill. The map has been integrated into an HTML page alongside a D3.js chart. A drop-down menu on the page allows users to select one of the 800 ce ...

javascriptjqueryd3.jsleafletmapbox

Checking Twitter follower count using Jquery and JSON

Here is a script that counts twitter followers:. However, it seems to be displaying the list of followers twice. I would like some assistance in getting just the follower count stats for the array elements. Thank you! echo "<div id='twitter'& ...

phpjqueryhtmljson

What is the process for integrating CSS-styled text into CKEditor?

Currently, I am developing plugins that are designed to incorporate various elements like images and tables into the editor. My objective is to be able to view these elements in their final visual form within the editor itself. To achieve this, I plan on a ...

cssckeditor

Buttons and links with intricate geometries

I am currently developing a web application using Java/JSF and I am interested in finding out about technologies that would allow me to define intricate shapes as clickable buttons or links. Right now, my only option is to split an image into smaller trans ...

javascriptjqueryhtmlcssjsf