I have been building a website to sell my instrumentals / music and was trying to find a way to create a simple .MP3 audio player button that prevented users from right clicking save target as... while simultaneously hiding the actual .MP3 file link. I also needed it to only play one sound at a time (prevent sounds overlapping.) What I discovered is that if it could be heard, it could most likely be downloaded.
The method that I discovered (with help from the stackoverflow community) is not 100% full proof against users finding and downloading your .mp3 files, but it will make it a little more difficult.
https://jsfiddle.net/9a9jbqzz/1/
Steps
(Optional) The first step is to convert the name of your sound file to something confusing like an MD5 hash (this is not 100% necessary but it makes it a little more tricky), for this example I will be taking the values 'control.mp3' and 'smooth.mp3' then convert them to their md5 hash. Link to online MD5 Hash Converter (you could also name them randomly anything you want like 12345abc ect.)
control.mp3 in MD5 Hash form = cef83b993c716dd543b6fa4f053cc4a4
smooth.mp3 in MD5 Hash form = cbbe0ab9d89c68f24f4fadff907fa720
Now that I have the MD5 Hash version of my file names. I will rename my MP3 files to their corresponding MD5 Hash. cef83b993c716dd543b6fa4f053cc4a4.mp3 and cbbe0ab9d89c68f24f4fadff907fa720.mp3
- I am now ready for code:
HTML:
<p><span class="play" key="cef83b993c716dd543b6fa4f053cc4a4">Play</span></p>
<p><span class="play" key="cbbe0ab9d89c68f24f4fadff907fa720">Play</span></p>
(Notice all you see is 'Key = cef83b993c716dd543b6fa4f053cc4a4' instead of somthing like src=path/control.mp3)
CSS:
.play
{
color:green;
cursor:pointer;
}
.pause
{
color:red;
cursor:pointer;
}
(I will make it so when clicked css changes you can edit this to have a background image button or whatever you like, this is just simple color change for example)
JQuery:
$(".play").on('click',function(){
var key = $(this).attr('key');
EvalSound(key);
var this_play = $(this);
$(".play").each(function() {
if ($(this)[0] != this_play[0]) {
$(this).removeClass("pause");
}
});
$( this ).toggleClass( "pause" );
});
var thissound = new Audio();
var currentKey;
var interval;
function EvalSound(key) {
if(currentKey !== key)
thissound.src = "http://99centbeats.com/beats/" + key + ".mp3";
currentKey = key;
if (thissound.paused) {
thissound.play();
interval = setInterval(function() {
if(thissound.currentTime == thissound.duration) {
clearInterval(interval);
$('.play').removeClass("pause");
}
},100);
} else {
thissound.pause();
thissound.currentTime = 0;
currentPlayer = thissound;
clearInterval(interval);
}
}
(You could put this in a .js file and name it something real confusing like an md5 hash, <script src="c50ea22a5484a69f1eb22f8aaccae296.js"></script> Just make sure this is after your HTML in order to work.)
This method is not 100% perfect and will not prevent all users from downloading your .mp3 files, but it will make it not as easy as just right clicking save target as. If you are trying to sell music for a living you may want to use this. In reality it seems the ones who will pay, are gonna pay regardless, and the ones who are gonna download it without paying are gonna do that regardless too, so in the end you are not really stopping much, but this is a technique I wanted to learn and implement. I decided to share this because I couldn't really find anywhere that did exactly this, You may want to do something different but this could possibly give you some ideas. Thanks for the people who helped me with the code!
Some stackoverflow / jsfiddle posts that helped:
Stopping/Pausing audio when another audio file is clicking using jQuery
Javascript Audio -- multiple play buttons on page with separate audio files
