Updated the HTML - now loads simpler JSON file | Details

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()">

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;
}

// 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 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>

Updated the HTML - now loads simpler JSON file

Audio CD to FLAC, VLC media player

Discussions

Become a Hackaday.io Member