Protect (from direct download) and play sound files

ajoo

Hi,
I wish to serve (using PHP) sound files off the server as I believe that is a good way to do so. However I also wish to protect the sound files and want to put them above the server root. On the client side the process is set rolling by a button press and then some n different sound files have to play and I need them to be served off the server. Is this possible ? If so how can it be accomplished?

If not then how to play sounds client side and protect the sound files on the server from direct download ?
Thanks loads !

NogDog

I would just make a PHP file-server script that would take a GET argument for the file identifier, sanitize it (e.g. to prevent any sort of directory injection), then use readfile() to output the file if it exists, else return a 404. (You'd also want to set applicable HTTP headers before doing the readfile().)

ajoo

Hi, Thanks ! You said you would use the readfile() to output the file ? output where ? And what exactly does the readfile() contain ? The sound file -- like some.mp3 ? And finally how would the readfile() play the sound ? Maybe you can demonstrate with a basic example.

Thanks !

NogDog

The PHP would just be to serve up the file to the browser from the web server (the same as the web server serves up the HTML, JavaScript, CSS, and image files. Instead of having your relevant HTML attribute point directly at the file, e.g. src="/static/audio/fubar.mp3", it might instead be something like `src="/static/audio/file.php?name=fubar.mp3". Then the "file.php" script would confirm the user is logged in, or whatever other criteria you want to use (http referer?) to allow access to the file.

<?php
session_start();
if(empty($_SESSION['user_id']) {
  // throw some sort of "not allowed" error, e.g.:
  header('HTTP/1.0 403 Forbidden');
  exit;
}
if(!empty($_GET['file'])) {
  $file = basename($_GET['file']);
  $dir = '/full/or/relative/file_system/path/to/audio/';
  if(file_exists($dir.$file)) {
    header('Content-Type: audio/mpeg');
    header('Content-Length: ' . filesize($dir.$file));
    readfile($dir.$file);
    exit;
  }
}
header('HTTP/1.0 404 Not Found');

ajoo

Thanks ! I'll give it a go and revert.
Just one thing though, would the code above sound a file as it is or would something need to be done with the readfile($dir.$file); to actually play / sound the file?

Thanks again.

NogDog

ajoo

Oh, as far as playing it, that would be on the browser side -- which is not my area of expertise. You would presumably use some javascript audio player component, and wherever you specify the URL for the sound file in that component, you would use the relevant URL to that PHP file.

ajoo

Hi ! Thanks for that insight. May I request someone with that expertise to kindly demonstrate how to use the readfile() received from php to play the sound file dynamically such that more than one sound file may be programmatically played on the client side. For example if I have an array of sounds like [a.mp3, b.mp3, c.mp3, d.mp3], how can i play these one after the other using files provided by php readfile as shown by NogDog

NogDog

Maybe start with https://www.w3schools.com/html/html5_audio.asp ? (HTML5 audio player)

Sempervivum

Yes, I tested it: You can play such file like any audio file by the HTML5 audio element. In order to play one audio after another you will need to attach an event listener to the "ended" event of ths player and set the source to the next one in the array.

<audio src="get-hidden-audio.php?file=track1.mp3" controls></audio>

ajoo

Hi
@NogDog Thanks for the link. I have already checked it out. I was hoping to do it without using an embedded player. you know, dynamically, using JS as below:-

audio = new Audio(data); audio.type = "audio/mpeg"; audio.play();
where data would be the sound object retrieved from $readfile(filename) from php. I have tried this using a $.post request. While I get the data ( sound file), the $.post being ajax and thus asynchronous, the program gets lost without errors and without any sound.

Sempervivum Thanks very much for chipping in. In your example I see that track1.mp3 is hard coded. If I use an event listener, how would I change the name of the next file to play? Basically the src = "" needs to be dynamic and I need to keep changing it. How would I achieve that ? Would you be kind enough to provide a small example?

Thanks loads !!

Sempervivum

Regarding the audio object: You can use this as well.

Regarding setting the src:

var idx = 0;
audio = new Audio(data);
audio.addEventListener('ended', function() {
    if (idx < your_array.length) idx++;
    else idx = 0;
    audio.src = your_array[idx];
    audio.play();
});
audio.type = "audio/mpeg";
audio.src = your_array[0];
audio.play();

Untested. What I'm not shure about: There is also an event "canplay". Maybe one has to wait for this event before playing the audio by calling play().

ajoo

Hi !
Pursuing the above I have come across something strange.
I have a fiddle here that plays a sound.
However when i put the same code in an HTML file and try and play it off my local server, it gives an error.

Uncaught (in promise) DOMException

Here's the html file with the same code.
`<html>
<head>
<title>My Sound</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

var url = "https://hpr.dogphilosophy.net/test/wav.wav";
var audio = new Audio(url);
audio.type = 'audio/wav';
audio.load();

audio.addEventListener("loadeddata", function() { 	
  audio.play();
}, true);

})

</script>
</body>
</html>`
Hopefully someone can point out what the issue is. Once the sounds get playing correctly then the url can be modified to get the data from readfile().

Thanks !