DESIGN NOTES PLACEHOLDER HTML code (body) <audio id="audiplay" src="https://domain-name/assets/load.mp3" controls autoplay controlsList="nodownload" style="width: 400px;"></audio> load.mp3 is a short 1second silent audio track - this is required for the native browser to validate it is a MP3 format file. The placeholder width should be the SAME as that in the Placeholder code. Height is not relevant, but I use 59px. ‘assets’ is a directory into which the MP3s should be loaded, the name can be anything. You could have sub-folders and structure an ‘audio library’. WEBSITE HTML Code (body) <script> var audio; var source ='https://domain-name/assets/'; function aplayer(song){ var locate = document.getElementById('audiplay').setAttribute('src', source + song); audio=locate; } </script> LINK TO EACH SONG javascript: aplayer('song-title-filename.mp3'); IN-PLAY GREEN javascript: audiplay.play(); PAUSE YELLOW javascript: audiplay.pause(); STOP RED javascript: aplayer('load.mp3');
A U D I O
P L U G I N