I have pasted the code in
<https://pastebin.com/z8q5cavm>
I will be having huge list of rows in the datatable and each row will have a specific href or mp3 file link. However the code always opens the serm.mp3 eventhough whatever i pass in the link.
Can someone help me on how to fix this javascript?
Basically want to change the src of the mp3 file when the media player open on clicking the href link in the datatable
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel='manifest' href='/manifest.json'>
<link rel="stylesheet" src="style.css">
<link rel="icon" type="image/png" href="icon1.png" />
<link rel='manifest' href='/manifest.json'>
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-status-bar" content="#ffffff" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--mobile icons-->
<link rel='shortcut icon' type='image/x-icon' href="images/icon.png" />
<link rel="apple-touch-icon" sizes="74x74" href="images/icon-74.png" />
<link rel="apple-touch-icon" sizes="96x96" href="images/icon-96.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/icon-144.png" />
<link rel="apple-touch-icon" sizes="384x384" href="images/icon-384.png" />
<link rel="apple-touch-icon" sizes="512x512" href="images/icon-512.png" />
<link href="https://fonts.googleapis.com/css?
family=Montserrat:400,700|Oxygen:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Theme Style -->
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="../../extensions/Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<style>
a.buttons-collection {
margin-left: 1em;
}
</style>
</head>
<body>
<section>
<div style="margin: 20px;">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>S No</th>
<th>Title</th>
<th>Listen</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td >Mp31</td>
<td ><a href="media/mp3/test1.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal"
data-value="media/mp3/test1.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td >Mp32</td>
<td ><a href="media/mp3/test2.mp3" title="Click To Listen" data-toggle="modal" data-target="#exampleModal" onClick=""
data-value="media/mp3/test2.mp3">Listen <svg class="bi bi-caret-right-square-fill" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
</svg> </td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>S No</th>
<th>Title</th>
<th>Listen</th>
<th>Download</th>
</tr>
</tfoot>
</table>
</div>
</section>
<!--MP3 modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">MP3</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" >
<div class="row" style="padding: 10px;">
<button type="button" class="btn btn-primary"><audio controls preload="metadata" style=" width:450px;">
<source src="media/mp3/serm.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio></button>
</div>
</div>
</div>
</div>
</div>
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214"/></svg>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/main.js"></script>
<script src="js/main.js"></script>
<script src="js/app.js"></script>
<script>$(document).ready(function() {
var t = $('#example').DataTable( {
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]],
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
responsive: true,
} );
t.on( 'order.dt search.dt', function () {
t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
} );</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js">
</script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
</body>
</html>
</code>
Thanks
