Audio Player - Desktop Embedded Page

Design Notes

Audio Tracks Listing Page

The concept deployed to avoid multiple popups is one of placing each audio track on its own page; the page size can be anything of the designer’s choice, but should be the same for all audio tracks. It does not need to to be the same size as others pages in the website. One page is designated as the ‘audioholder’ which is called by an iframe on the audio listings page.

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>

placeholder for the individual sound track pages is an iframe:

<iframe src="audioholder.htm" title="Audio_Player" id="audioholder" name="audioholder" width="100%" height="100%" scrolling="no" style="border-style:none;"onload="window.scrollTo({top:0, left:0, behaviour: 'smooth'} );" ></iframe>

links to individual pages from listings page

These are standard links to each individual audio page, but importantly they are opened in the iframe window.

Sound Track pages

LINK TO EACH audio track

javascript: aplayer('song-title-filename.mp3');

SOUND TRACK PAGES AUDIO 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 59px has been used here. ‘assets’ is a directory into which the selected MP3s should be loaded, the name can be anything and one could have sub-folders structured to create an ‘audio library’.

IN-PLAY GREEN

javascript: audiplay.play();

IN-PLAY PAUSE YELLOW

javascript: audiplay.pause();

IN-PLAY STOP RED

javascript: aplayer('load.mp3');