javascript - How to make .MP3 Audio Player that prevents right click save target as... with Jquery -

i have been building website sell instrumentals / music , trying find way create simple .mp3 audio player button prevented users right clicking save target as... while simultaneously hiding actual .mp3 file link. needed play 1 sound @ time (prevent sounds overlapping.) discovered if heard, downloaded.

the method discovered (with stackoverflow community) not 100% full proof against users finding , downloading .mp3 files, make little more difficult.

https://jsfiddle.net/9a9jbqzz/1/

steps

1. (optional) first step convert name of sound file confusing md5 hash (this not 100% necessary makes little more tricky), example taking values 'control.mp3' , 'smooth.mp3' convert them md5 hash. link online md5 hash converter (you name them randomly want 12345abc ect.)

   control.mp3 in md5 hash form = cef83b993c716dd543b6fa4f053cc4a4

   smooth.mp3 in md5 hash form = cbbe0ab9d89c68f24f4fadff907fa720

now have md5 hash version of file names. rename mp3 files corresponding md5 hash. cef83b993c716dd543b6fa4f053cc4a4.mp3 , cbbe0ab9d89c68f24f4fadff907fa720.mp3

2. i ready code:

html:

<p><span class="play" key="cef83b993c716dd543b6fa4f053cc4a4">play</span></p>     <p><span class="play" key="cbbe0ab9d89c68f24f4fadff907fa720">play</span></p> 

(notice see 'key = cef83b993c716dd543b6fa4f053cc4a4' instead of somthing src=path/control.mp3)

css:

.play { color:green;     cursor:pointer; }  .pause  { color:red;   cursor:pointer; } 

(i make when clicked css changes can edit have background image button or whatever like, simple color change 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");         }     });     $( ).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 put in .js file , name real confusing md5 hash, <script src="c50ea22a5484a69f1eb22f8aaccae296.js"></script> make sure after html in order work.)

this method not 100% perfect , not prevent users downloading .mp3 files, make not easy right clicking save target as. if trying sell music living may want use this. in reality seems ones pay, gonna pay regardless, , ones gonna download without paying gonna regardless too, in end not stopping much, technique wanted learn , implement. decided share because couldn't find anywhere did this, may want different possibly give ideas. people helped me code!

some stackoverflow / jsfiddle posts helped:

stopping/pausing audio when audio file clicking using jquery

javascript audio -- multiple play buttons on page separate audio files

hide mp3 full url

http://jsfiddle.net/dledet1/55vag/11/

you can never make 100% proof, since need serve data, can captured. job though, looks pretty obfuscated, though not question.