Play all music files from a local or remote directory via web browser

I blogged about Setting up Raspberry Pi with Apache HTTP server to display files from external hard drive over HTTPS with authentication. The external drive in question has a folder called Music and my objective here is to play all MP3 files from the folder one after another, in a random order. I can click on each file and play them one by one, but that's quite inconvenient. So I decided to use PHP to find all files in the directory and play them using HTML5 Audio tag in a random order. The steps are below (on my Raspberry Pi):

1. $ sudo apt-get update && sudo apt-get upgrade

2. Install PHP: $ sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache php5-mysql php5-curl php5-gd

3. Go to DocumentRoot $ cd /var/www/html

4. Create a file for testing $ sudo echo "<?php phpinfo(); ?>" | sudo tee index.php

5. Restart Apache $ sudo service apache2 restart

6. Go to your browser and type x.x.x.x/index.php

If everything works Ok proceed to the next step.

I found it difficult to work with Aliases for this exercise. In my previous note I used

Alias /500all "/media/HD500G"

but now I changed it to

Alias /media/HD500G "/media/HD500G"

(so you can work without Aliases, but I wanted to keep it because I may revert it back).

The next step is to create a music.php file under DocumentRoot that will find the MP3 files from a directory and will play the files. The code is below.

Once you have created the file, change the directory name and go to x.x.x.x/music.php on your web browser.

References:
https://www.stewright.me/2015/08/tutorial-install-apache-php-and-mysql-on-a-raspberry-pi-2/
http://www.webdeveloper.com/forum/showthread.php?352807-PROBLEM-play-all-mp3-files-from-dir-PHP

Setting up Raspberry Pi with Apache HTTP server to display files from external hard drive over HTTPS with authentication

Devices:
Raspberry Pi 2 Model B (I bought it with a case and charger - Amazon link)
with 64 GB Micro SD card -  Amazon link
AT&amp;T U-verse router 5031NV 

In my last post I detailed how to share files from an external hard drive using Samba. However I wanted to see and play the files from my external hard drive on the web browser and the easiest way to achieve that was by using Apache HTTP Server. This post contains information about setting up the server, using it to list directories and files, and configure HTTPS using OpenSSL.

While writing this post, my external drive is already mounted at /media/HD500G. You can see the details in the "Set up the external hard drive" section in my previous post.

Apache Installation and mapping URL to FileSystem using Alias

1. I installed apache2 and php5 using
$ sudo apt-get install apache2 php5 libapache2-mod-php5

After the installation completed, I created an alias at /etc/apache2/sites-enabled/000-default.conf and

2. added the following to the file:

Also I set the permission for the files in the shared directory:

3. $ sudo chmod -R o+x /media/HD500G

and restarted the service

4. $ sudo service apache2 restart

Apache runs on port 80 for HTTP and port 443 for HTTPS. It's now ready to show the contents of /media/HD500G if you browse http://111.222.333.444/500all (assuming my public IP is 111.222.333.444 and port 80 is open in my router configuration). However please do NOT open the ports in your router at this point as this is very insecure.

More details about port forwarding is described in previous posts about Samba and SSH and VNC. I created a new user defined application for Apache and associated it with ports 80 and 443.

Configure HTTP basic authentication in Apache

Now I wanted to configure Apache so that it will ask for a username and password before showing the contents of /500all. I used the following steps to configure it:

5. Create a directory: # mkdir /etc/htpasswd
6. Set Up the password for user pi: # htpasswd -c /etc/htpasswd/.htpasswd pi
7. Create a new .htaccess file:
# pwd
/media/HD500
# vi .htaccess
# cat .htaccess
AuthType Basic
AuthName "Authentication Required"
AuthUserFile "/etc/htpasswd/.htpasswd"
Require valid-user


8. Edit /etc/apache2/sites-enabled/000-default.conf
So this is what you added in Step-2. Just replace "All" with "AuthConfig" for AllowOverride. And restart apache:

9. $ sudo service apache2 restart

At this point, if you browse http://111.222.333.444/500all it will ask for a username and password. Username is pi, and the password is what you set in step-6. This is slightly more secure than before, but the credentials will be passed over HTTP, so a MITM can see it in clear text. Now we will configure HTTPS to encrypt the communication.

Configure HTTPS and redirect HTTP traffic

10. Create new keys and certificate using OpenSSL.

# pwd
/etc/apache2


11. Enable SSL module

# a2enmod ssl

12.  Add the following to /etc/apache2/sites-enabled/000-default.conf

 13. Redirect all HTTP traffic to HTTPS. Add the following to /etc/apache2/sites-enabled/000-default.conf

14. Restart Apache:
$ sudo service apache2 restart

That's it. Now browsing http://111.222.333.444/500all will redirect you to https://111.222.333.444/500all and it will ask for authentication. Ignore the complaints from the browser, they don't like self-signed certificates (of course for very valid reasons). But now the connection is encrypted and all the contents of the drive are password protected.