Close

Updated the HTML - now loads simpler JSON file

A project log for Raspberry PI FLAC audio server

Do you have a bunch of FLAC files, and want to enjoy the music on any device on your network? NO APP REQUIRED! :)

sciencedude1990sciencedude1990 05/15/2021 at 03:250 Comments

This new version of the HTML will load a simpler JSON file - one that can have line breaks...it uses a XMLHttpRequest() to load the simple JSON text file...

The new file format can be

[{},

{},

{},

...

]

Here is the HTML:

<html>

<link rel="icon" 
      type="image/png" 
      h r e f = " your url / favicon.png ">
<title>Music Catalog</title>
<style>
#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 40px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}
</style>
</head>
<body onload="init()">

<script>

var album_start = -1;
var album_stop  = -1;
var album_current = -1;
// The Audio player
var theAudio;
// Parse the JSON file
var mydata; 
// The main list
var the_UL;
// Text about the song
var theText;

function init() {
theAudio = document.getElementById("myAudio");

// Create XMLHttpRequest
        var xmlhttp = new XMLHttpRequest();

        // When ready, try to read the filenames from the file
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                // Parse it 
                //console.info(this.responseText);
 
                mydata = JSON.parse(this.responseText);
            }
        };

        // Set the name of the file
        xmlhttp.open("GET", "new_catalog.json", true);
        // The send
        xmlhttp.send();

the_UL = document.getElementById("myUL");
theText = document.getElementById("myText");

theAudio.onended = function() { nextSongandPlay();};

theAudio.setAttribute("style", "width:" + (window.innerWidth - Math.round(window.innerWidth * 0.03)) + "px");
}

function nextSongandPlay() {
// When a song in the album finishes play, get the next song...
if ((album_current + 1) > album_stop) {
playSong(album_start);
}
else {
playSong(album_current + 1);
}

}

function loadAudio() {
theAudio.src = mydata[album_current].filename;

theText.innerHTML = mydata[album_current].Title + ", " + mydata[album_current].Artist;
}

function loadSingleAlbum(ii) {
// Clear UL
clearUL();

if (mydata.length >= 1) {
if ((ii >= 0) && (ii < mydata.length)) {
// Start at ii and find the maximum ii
var ii_max = ii;

var found_it = 0;

while (found_it == 0) {
if (ii_max == (mydata.length - 1)) {
// At the end of the list, stop
found_it = 1;
}
else {
if (mydata[ii_max + 1].Album.localeCompare(mydata[ii].Album) != 0) {
// Next item in list is not in album
found_it = 1;
}
else {
// Keep searching
ii_max = ii_max + 1;
}
}
}

// Great - add the songs to the main list
for (jj = ii; jj <= ii_max; jj++) {
addItemSong(mydata[jj].Track + " " + mydata[jj].Title, jj);
}

// Set album start and stop
album_start = ii;
album_stop = ii_max;
album_current = ii;

// Load the audio
loadAudio();

// Bring the browser back to the top of the page
window.scrollTo(0, 0);
}
}
}

function loadAlbums() {
// Stop the player
theAudio.pause();
theAudio.src = "";
theText.innerHTML = "Welcome";

// Clear the UL
clearUL();
    
// Place the JSON contents in UL
if (mydata.length >= 1) {
var go_add = 1;
for (ii = 0; ii < mydata.length; ii++) {
if (ii > 0) {
if (mydata[ii - 1].Album.localeCompare(mydata[ii].Album) == 0) {
go_add = 0;
}
else {
go_add = 1;
}
}

if (go_add == 1) {
addItemAlbum(mydata[ii].Album, ii);
}
}
}
}

function addItemAlbum(Album, ii) {  // Add an album to the main list

// A list item
var the_LI = document.createElement("li");

// The href
var the_A = document.createElement("a");

//the_A.setAttribute("href", "javascript:void(0)");
the_LI.appendChild(the_A);

the_A.textContent = Album;
the_LI.setAttribute("onmousedown", "loadSingleAlbum(" + ii + ")");
the_UL.appendChild(the_LI);
}

function addItemSong(Song, ii) {   // Add a song to the main list

// A list item
var the_LI = document.createElement("li");

// The href
var the_A = document.createElement("a");

//the_A.setAttribute("href", "javascript:void(0)");
the_LI.appendChild(the_A);

the_A.textContent = Song;
the_LI.setAttribute("onmousedown", "playSong(" + ii + ")");
the_UL.appendChild(the_LI);
}

function playSong(ii) {    // Play the song "ii"

if ((ii >= album_start) && (ii <= album_stop)) {
album_current = ii;
loadAudio();
theAudio.play();
}

}

function clearUL() {
// Clear it!
the_UL.textContent = "";
}

</script>

<audio id="myAudio" controls style="width:500px; height=100px">
</audio>
<br>
<br>
<br>
<br>
<hr>
<p id="myText" style="font-size:32px">Welcome</p>
<button id="btnAlbums" style="font-size:32px; width:400px; height:90px" onmouseup="loadAlbums()">Albums</button>
<br>
<br>
<span style="cursor:pointer">
<ul id="myUL" style="width:800px">  
</ul>
</span>

</body>
</html>

Discussions