How to access forEach tag values of JSP in Script Tag of Javascript Dynamically.?

Question

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..??

Sounds like the audio source is the same for each track. What does track.track_no evaluate to for each track? — Dennis Hackethal
– Dennis Hackethal, Commented Aug 3, 2020 at 6:48
track.track_no retrieves audi files according to the present track_no — Geetha
– Geetha, Commented Aug 3, 2020 at 7:08
That doesn't answer my question. I didn't ask what track.track_no does. I asked what each track.track_no evaluates to. — Dennis Hackethal
– Dennis Hackethal, Commented Aug 3, 2020 at 7:19

Swati · Accepted Answer · 2020-08-03 07:52:13Z

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>

Dharman · Accepted Answer · 2020-08-04 05:55:37Z

$('.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();
    }
});

in this script you are accessing the audio values which are not there and also you should dynamically push the audio files to the list and then access them

use the count as below on iterating the foreach loop and set that count in the audio tag

<c:set var="count" value="0" scope="page" />

<c:set var="count" value="${count + 1}" scope="page"/>

after pushing the audio files to the list then access the the audio list through this index (count) so that it will call the exact audio file to play

Collectives™ on Stack Overflow

How to access forEach tag values of JSP in Script Tag of Javascript Dynamically.?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related