CPU-Audio configuration of the player

This is a primitive live configurator for CPU-Audio, helping you to tune it for your website. Please note that you should have a browser with webcomponents support to really enjoy it. See INSTALL.md for explanations on attributes and values.

Configure html Generated html Configure css Generated css Global parameters Generated global parameters

sound file sound file sound file

Is a stream , see Special case for live streamed media in INSTALL.md. Also check how to indicate a prefered downloadable audio resource.

Chapter VTT text file URL

Mode Title Cover image url Waveform image URL Estimated duration Canonical page link Downloadable audio link Twitter handle

Hide Poster Actions Chapters Time-line Panels Panels' title Panels except playing

Glow Glow play button before first play

Paste this HTML code where you want the player in your page

<cpu-audio title="Au carnaval avec Samba Résille (2003)" poster="https://dascritch.net/vrac/.blog2/entendu/.1404-SambaResille_m.jpg">
	<audio controls id="sound">
		<source src="https://dascritch.net/vrac/sonores/1404-SambaResille2003.ogg" type="audio/ogg" />
		<source src="https://dascritch.net/vrac/sonores/podcast/1404-SambaResille2003.mp3" type="audio/mpeg" />
	</audio>
</cpu-audio>

Go to CSS configurator

Font families Font line height Shadow between horizontal panels

Colour

Background

Colours except playing or in error Colours when there is a media error Colours while playing Alternate focus colours Colours for the time pointer Transition duration

Breakpoints	wider						smaller
Time indicator width
Font size
Font small size
Height and width of the square buttons

Copy and paste this CSS code into your stylesheet. Or write it :

Please note : Some of those parameters cannot be changed live in this page.

Basic player

playStopOthers When a <cpu-audio> starts to play, any other instances in the same page are paused. Default : activated

scrollTo On any link to a time-stamp in the page, will scroll the viewport to display the playing interface. Default : activated.

Autoplay Will try to play at the start of the page if a temporal URL is given or the audio was previously exited. Default : unactivated. This may be prevented by your browser.

IDPrefix A minimum of 2 letters (or "-" or "_"), then a final dash are recommended. Default : CPU-Audio-tag-.

Interface aspect

globalCss Insert in the <head> of the host document a specific <style> with all needed css variables for the player. Default : activated. Beware to not activate it if any of the needed css variables are not inserted by your side.

Playlist interactions

advanceInPlaylist When an audio is ended in a playlist, starts immediatly the next one. Default : activated.

Keyboard navigation

keymove seconds skipped in the timeline with ← or → keys. Default : 5 seconds.

Precise navigation with fingers

alternateDelay milliseconds of long press on time-line to switch to the handheld alternate browsing interface. Not recommended to modify. Default : 1 000 ms

fastFactor amplification ratio between ▸︎▸︎ and ▸︎▸︎▸︎ in handheld alternate browsing interface. Default : 4 ×

repeatDelay milliseconds delay before first repetition when clicking a button in handheld alternate browsing interface. Default : 400 ms

repeatFactor milliseconds delay before repeating when clicking a button in handheld alternate browsing interface. Default : 100 ms

Copy and paste this HTML code in the <head> before the <script> tag calling cpu-audio.js :

Beware to have a strict and valid JSON object.