Instructions | Raspberry PI FLAC audio server

1

Connect the raspberry pi

Connect the raspberry pi to your home router with an ethernet cable. Set a static ip address on the PI.

At the prompt:

sudo nano /etc/dhcpcd.conf

Add the following lines for at the bottom of the file:

interface eth0

static ip_address=192.167.1.106/24

static routers=192.167.1.1
2

Install the webserver

Install your favorite webpage server, such as:

https://www.raspberrypi.org/documentation/remote-access/web-server/apache.md

Make a subdirectory in the html folder, call it "music"

i.e.,

/var/www/html/music
3

Connect the SD card

Nothing is better than a giant capacity micro SD card to store all your music!

Connect it to the PI, then figure out where it went...

Use the command

sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL

The result will give something like this...

UUID NAME FSTYPE SIZE MOUNTPOINT LABEL MODEL

sda 29.7G SDDR-

sda1 vfat 29.7G

...

It is probably called sda1.

Now, you are going mount the drive in the music folder...

Edit your rc.local file...

sudo nano /etc/rc.local

Add at the end of the file add..

mount /dev/sda1 /var/www/html/music
4

Place your music collection on the SD card

You might want to add a samba server too, to make it easier to copy the files, for example:
https://www.raspberrypi.org/documentation/remote-access/samba.md
5

Create the JSON file

The easiest way I found to get your music library loaded in the webpage is to use a JSON file.
I created a file name catalog.json
Here is the basic structure of the json file.
data = '[{"Album" : "My favorite album", "Track" : "Track 1", "Title" : "My first song", "Artist" : "Science Dude 1990", "filename" : "album directory/Track 1.flac"},{"Album" : "My favorite album", "Track" : "Track 2", "Title" : "My second song", "Artist" : "Science Dude 1990", "filename" : "album directory/Track 2.flac"}]';
So, you can add the information for each one of your flac files into this JSON file. The JSON file is very simple, just add the information for each flac file (or whatever audio file). The HTML in the next step is very simple, so keep all the files for one file together in the flac file.
6

HTML

Here is the listing of the index.html. I used some examples from www.w3schools.com
<html>
<head>
<title>Music Catalog</title>
<style>
#myUL {
/* Remove default list styling - Please see www.w3schools.com for reference */
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 type="text/javascript" src="catalog.json"></script>
<script>

// Variables to track the album
var album_start = -1;
var album_stop = -1;
var album_current = -1;

// The Audio player
var theAudio;

// Place to place the parsed JSON file
var mydata;

// The main list
var the_UL;

// Text about the song
var theText;

function init() {
// Called when the website loads

// Parse the JSON file with the track information
mydata = JSON.parse(data);

// Assign the HTML parts to their variables
theAudio = document.getElementById("myAudio");

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

// When the audio player is done with a track from an album, play the next track
theAudio.onended = function() { nextSongandPlay();};

// Make sure the player is the correct width
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 at the end of the album, go back to the start
if ((album_current + 1) > album_stop) {
playSong(album_start);
}
else {
// Otherwise, increment the current
playSong(album_current + 1);
}
}

function loadAudio() {
// Load the audio file and update the simple label

// Load the audio file
theAudio.src = mydata[album_current].filename;

// Set the label of the current track
theText.innerHTML = mydata[album_current].Title + ", " + mydata[album_current].Artist;
}

function loadSingleAlbum(ii) {
// Load up the UL list with the single album

// 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() {
// Load all the albums in the UL list

// 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");

// Add the information to the LI list item
the_LI.appendChild(the_A);

the_A.textContent = Album;

// When the user clicks an album, then use the loadSingleAlbum function
the_LI.setAttribute("onmousedown", "loadSingleAlbum(" + ii + ")");

// Append to the list
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;

// When the user clicks on a song, use the playSong function
the_LI.setAttribute("onmousedown", "playSong(" + ii + ")");

// Append the item to the list
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 main list
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>

Raspberry PI FLAC audio server

Discussions

Become a Hackaday.io Member