Lydafspiller i modalt vindue

Kode

Da jeg udviklede denne version af Psylicium.dk (januar 2023), fik jeg optimeret lydafspilleren, så hvor jeg før havde et skjult modalt vindue for hvert eneste musiknummer, som så åbnede dets tilsvarende vindue baseret på ID, har jeg nu kun ét modalt vindue til al afspilning. Det har lettet koden og sideindlæsningen gevaldigt, og fungerer kort og godt således:

Jeg har lavet et “blueprint” af det modale vindue uden indhold, som selvfølgelig er skjult når siden indlæses. I dette vindue er pladsholdere til coverbillede, titel, kunstner og mp3-fil, og disse bliver udfyldt af jQuery vha. data-* attributter i links med CSS-klassen “player”
Når jeg hiver musiknumrene ind fra databasen, kører jeg titlen gennem str_replace, der fjerner specialtegn og mellemrum, og sætter “player-” foran, så f.eks. “Best Day (Z-Buffer Club Mix)” bliver til id=”player-bestdayzbufferclubmix”. Dette bliver til linkets unikke ID, som så får udtrukket info (titel, kunstner, cover og mp3-fil) fra data-* attributterne

Opret 3 tomme filer – modal.php (eller modal.html, hvis indholdet er statisk – jeg bruger .php i dette eksempel), modal.js samt modal.css, og indsæt indholdet herunder i de relevante filer.

modal.php: Det modale vindue med et full-screen overlay, der slører baggrunden:

<div class="modal-overlay">
   <div class="modal-content">
      <img class="cover" src="" id="cover">
      <div class="info">
         <span id="title" class="title"></span>
         <span id="performer" class="performer"></span>
      </div>
      <div class="player">
         <audio id="audio" controls autoplay preload="none" src=".mp3"></audio>
         <!-- Dummy file prevents the DOM from creating embed object -->
      </div>
      <span class="modal-close" onclick="document.getElementById('audio').currentTime = 0; document.getElementById('audio').pause();">&times;</span>
   </div>
</div>

</div>

</div>

</div>

modal.php fortsat – generering af player ID og link med af data-* attributter:

$performer = "Jarre";
$cover_image = "cover.jpg";
$filename = "audio.mp3";

// Generate ID for modal window based on title
$title = "Equinoxe Part 4 (Scrubtuds 2K22 Edit)";

$replace = array('æ', 'ø', 'å', '\'', ' ', '(', ')', '-', '?', '!', '.','&');

// $playerid is now "equinoxepart4scrubtuds2k22edit"
$playerid = strtolower(str_replace($replace, '', $title));

echo '<article>';
echo '<a id="player-'.$playerid.'" class="player" data-cover="'.$cover_image.'" data-audio="'.$filename.'" data-title="'.$title.'" data-performer="'.$performer.'">';
echo $performer.' - '.$title.' (click to open player)';
echo '</a>';
echo '</article>';

$performer = "Jarre";

$cover_image = "cover.jpg";

$filename = "audio.mp3";

// Generate ID for modal window based on title

$title = "Equinoxe Part 4 (Scrubtuds 2K22 Edit)";

$replace = array('æ', 'ø', 'å', '\'', ' ', '(', ')', '-', '?', '!', '.','&');

// $playerid is now "equinoxepart4scrubtuds2k22edit"

$playerid = strtolower(str_replace($replace, '', $title));

echo '<article>';

echo '<a id="player-'.$playerid.'" class="player" data-cover="'.$cover_image.'" data-audio="'.$filename.'" data-title="'.$title.'" data-performer="'.$performer.'">';

echo $performer.' - '.$title.' (click to open player)';

echo '</a>';

echo '</article>';

modal.js:

$(document).ready(function(){
   $('.player').on('click', function() {
      $('.modal-overlay').css({"visibility": "visible", "opacity": "1"}); // Activate the full-screen overlay
      $('.modal-content').addClass("active");                             // Set class 'active' on modal-content, ie. show it
      $(document.body).addClass('noScroll');                              // Prevent the background from scrolling
    	
      var id = $(this).attr('id');                      // Get ID from clicked link ('music1', 'music2' ...)
      var title = $('#'+id).attr('data-title');         // Prepend # ('#music1', '#music-2' ... and set 'title' as data-title
      var performer = $('#'+id).attr('data-performer'); // Prepend # and set 'performer' as data-performer
      var cover = $('#'+id).attr('data-cover');         // Prepend # and set 'cover' as data-cover
      var audio = $('#'+id).attr('data-audio');         // Prepend # and set 'audio' as data-audio
    
      $('#title').text(title);         // Target ID #title in the modal window and replace with 'title'
      $('#performer').text(performer); // Target ID #performer and replace with 'performer'
      $("#cover").attr("src", cover);  // Target the img src attribute in ID #cover and fill in 'cover'
      $('#audio').attr("src", audio);  // Target the audio src attribute in ID #audio and fill in 'audio'

      // The Close Button
      $('.modal-close').on('click', function() {
         $('.modal-content').removeClass("active");
         $('.modal-overlay').css({"visibility": "hidden", "opacity": "0"});
         $(document.body).removeClass('noScroll');
      })
   })
});

$(document).ready(function(){

$('.player').on('click', function() {

$('.modal-overlay').css({"visibility": "visible", "opacity": "1"}); // Activate the full-screen overlay

$('.modal-content').addClass("active"); // Set class 'active' on modal-content, ie. show it

$(document.body).addClass('noScroll'); // Prevent the background from scrolling

var id = $(this).attr('id'); // Get ID from clicked link ('music1', 'music2' ...)

var title = $('#'+id).attr('data-title'); // Prepend # ('#music1', '#music-2' ... and set 'title' as data-title

var performer = $('#'+id).attr('data-performer'); // Prepend # and set 'performer' as data-performer

var cover = $('#'+id).attr('data-cover'); // Prepend # and set 'cover' as data-cover

var audio = $('#'+id).attr('data-audio'); // Prepend # and set 'audio' as data-audio

$('#title').text(title); // Target ID #title in the modal window and replace with 'title'

$('#performer').text(performer); // Target ID #performer and replace with 'performer'

$("#cover").attr("src", cover); // Target the img src attribute in ID #cover and fill in 'cover'

$('#audio').attr("src", audio); // Target the audio src attribute in ID #audio and fill in 'audio'

// The Close Button

$('.modal-close').on('click', function() {

$('.modal-content').removeClass("active");

$('.modal-overlay').css({"visibility": "hidden", "opacity": "0"});

$(document.body).removeClass('noScroll');

})

});

modal.css:

.modal-overlay {
   background-color: rgba(0,0,0,.7);
   opacity: 0;
   visibility: hidden;
   width: 100%;
   height: 100%;
   position: fixed;
   overflow-y: scroll;
   top: 0;
   left: 0;
   -webkit-backdrop-filter: blur(10px) grayscale(100%);
   backdrop-filter: blur(10px) grayscale(100%);
   z-index: 999;
   transition: all .5s;
}

.noScroll {
   overflow: hidden;
}

.modal-content {
   background-color: #fff;
   color: #333;
   position: absolute;
   text-align: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 400px;
   padding: 1rem;
   border-radius: 5px;
   box-shadow: 0 0 10px rgb(0 0 0 / 50%);
   transition: all .2s;
   opacity: 0;
   transition-timing-function: ease-in-out;
}

.modal-content .cover {
   width: 150px;
}

.modal-content .info {
   margin: 1rem 0;
   padding: .5rem;
   background-color: #ccc;
}
.modal-content .info span {
   display: block;
   text-align: center;
}

.modal-content .info .title {
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.5rem;
   margin-bottom: 0.5rem;
}

.modal-content .info .performer {
   font-size: 1.1rem;
}

.modal-content .player {
   display: block;
}

.modal-content .release {
   font-size: .8rem;
   text-align: center;
   width: 100%;
}

.modal-content.active {
   opacity: 1;
}

.modal-close {
   background-color: var(--modal-close-bg);
   color: var(--modal-close-cross);
   position: absolute;
   top: .5rem;
   right: .5rem;
   cursor: pointer;
   font-size: 1.5em;
   line-height: 20px;
   padding: 0 4px 3px;
   margin: 0;
   border-radius: 50%;
}

.modal-overlay {

background-color: rgba(0,0,0,.7);

opacity: 0;

visibility: hidden;

width: 100%;

height: 100%;

position: fixed;

overflow-y: scroll;

top: 0;

left: 0;

-webkit-backdrop-filter: blur(10px) grayscale(100%);

backdrop-filter: blur(10px) grayscale(100%);

z-index: 999;

transition: all .5s;

}

.noScroll {

overflow: hidden;

}

.modal-content {

background-color: #fff;

color: #333;

position: absolute;

text-align: center;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 400px;

padding: 1rem;

border-radius: 5px;

box-shadow: 0 0 10px rgb(0 0 0 / 50%);

transition: all .2s;

opacity: 0;

transition-timing-function: ease-in-out;

}

.modal-content .cover {

width: 150px;

}

.modal-content .info {

margin: 1rem 0;

padding: .5rem;

background-color: #ccc;

}

.modal-content .info span {

display: block;

text-align: center;

}

.modal-content .info .title {

font-size: 1.25rem;

font-weight: 600;

line-height: 1.5rem;

margin-bottom: 0.5rem;

}

.modal-content .info .performer {

font-size: 1.1rem;

}

.modal-content .player {

display: block;

}

.modal-content .release {

font-size: .8rem;

text-align: center;

width: 100%;

}

.modal-content.active {

opacity: 1;

}

.modal-close {

background-color: var(--modal-close-bg);

color: var(--modal-close-cross);

position: absolute;

top: .5rem;

right: .5rem;

cursor: pointer;

font-size: 1.5em;

line-height: 20px;

padding: 0 4px 3px;

margin: 0;

border-radius: 50%;

}

Inkludér modal.css, modal.js samt jQuery (https://releases.jquery.com/) i headeren som vist herunder. Dette er et helt simpelt HTML-eksempel med 2 afspillere – audio-1 og audio-2.

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="modal.css" type="text/css" media="screen" />
   <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
   <script src="modal.js"></script>
</head>
<body>
   <div class="modal-overlay">
      <div class="modal-content">
         <img class="cover" src="" id="cover">
         <div class="info">
            <span id="title" class="title">This is info</span>
            <span id="performer" class="performer"></span>
         </div>
         <div class="player">
            <audio id="audio" controls autoplay preload="none" src=".mp3"></audio>
            <!-- Dummy file prevents the DOM from creating embed object -->
         </div>
         <span class="modal-close" onclick="document.getElementById('audio').currentTime = 0; document.getElementById('audio').pause();">&times;</span>
      </div>
   </div>

   <a id="player-audio1" class="player" data-cover="cover1.jpg" data-audio="audio1.mp3" data-title="Dette er Titel 1" data-performer="Dette er kunstner 1">Kunstner 1 - Titel 1 (Klik for at åbne afspiller)</a>
   <a id="player-audio2" class="player" data-cover="cover2.jpg" data-audio="audio2.mp3" data-title="Dette er Titel 2" data-performer="Dette er kunstner 2">Kunstner 2 - Titel 2 (Klik for at åbne afspiller)</a>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</div>

<a id="player-audio1" class="player" data-cover="cover1.jpg" data-audio="audio1.mp3" data-title="Dette er Titel 1" data-performer="Dette er kunstner 1">Kunstner 1 - Titel 1 (Klik for at åbne afspiller)</a>

<a id="player-audio2" class="player" data-cover="cover2.jpg" data-audio="audio2.mp3" data-title="Dette er Titel 2" data-performer="Dette er kunstner 2">Kunstner 2 - Titel 2 (Klik for at åbne afspiller)</a>

</body>

</html>