I am trying to fetch all the details of each track of album from controller(servlet) to jsp page using forEach tag.The values are getting fetched perfectly.For combining play/pause button and audio tag I have written the following code. But, using this only the first track is played.Even while playing remaining tracks the first song is getting played.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- APlayer CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://localhost:8080/Music_Streamer/resources/css/homeTrackDisplay.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table class="center">
<tr>
<th style="text-align: left;">SONG</th>
<th>TITLE</th>
<th>ARTIST</th>
<th><span class="glyphicon glyphicon-time" style="color:grey;"></span></th>
</tr>
<tr></tr>
<tr></tr>
<c:forEach items="${tracklist}" var="track" >
<tr>
<td>
<audio id="sound${track.track_no}">
<source src="./TrackRetrieve?track_no=${track.track_no}" type="audio/mpeg">
</audio>
<h2>Sound ${track.track_no}</h2>
<div class="play" id="btn${track.track_no}">play</div>
</td>
<td>${track.track_name}</td>
<td>${track.track_performer}</td>
<td>${track.track_duration}</td>
<td></td>
</tr>
</c:forEach>
</table>
<script>
$('.play').click(function(){
var $this = $(this);
let id = $this.attr('id');
id = id.split("btn")[1];
$this.toggleClass('active');
if($this.hasClass('active')){
$this.text('pause');
$('audio[id^="sound"]')[id-1].play();
} else {
$this.text('play');
$('audio[id^="sound"]')[id-1].pause();
}
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- APlayer JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Can you please suggest ways to access values from jsp in script tag..??
As onclick of your play button you are getting id i.e :${track.track_no} you can use same to play required audio file .Because in your current code you have <audio id="sound${track.track_no}"> so just use this in selector to play required audio .
Demo Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- APlayer CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://localhost:8080/Music_Streamer/resources/css/homeTrackDisplay.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table class="center">
<tr>
<th style="text-align: left;">SONG</th>
<th>TITLE</th>
<th>ARTIST</th>
<th><span class="glyphicon glyphicon-time" style="color:grey;"></span></th>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td>
<audio id="sound1">
<source src="http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3" type="audio/mpeg">
</audio>
<h2>Sound ${track.track_no}</h2>
<div class="play" id="btn1">play</div>
</td>
<td>${track.track_name}</td>
<td>${track.track_performer}</td>
<td>${track.track_duration}</td>
<td></td>
</tr>
<tr>
<td>
<audio id="sound2">
<source src="http://www.soundjay.com/button/beep-07.wav" type="audio/mpeg">
</audio>
<h2>Sound ${track.track_no}</h2>
<div class="play" id="btn2">play</div>
</td>
<td>${track.track_name}</td>
<td>${track.track_performer}</td>
<td>${track.track_duration}</td>
<td></td>
</tr>
</table>
<script>
$('.play').click(function() {
var $this = $(this);
let id = $this.attr('id');
id = id.split("btn")[1];
console.log(id)
console.log("sound" + id);
$this.toggleClass('active');
if ($this.hasClass('active')) {
$this.text('pause');
//play audio of given id
$("audio[id=sound" + id + "]")[0].play();
} else {
$this.text('play');
//pause audio of given id
$("audio[id=sound" + id + "]")[0].pause();
}
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- APlayer JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>