JavaScript Documentation

Documentation for the JavaScript version, API and overall JavaScript implementation.

Getting Started

Izubizu Radio & Audio Player is a compact ES6 audio player for live radio streams and regular audio files. The current JavaScript runtime supports direct audio URLs, HLS playlists, Shoutcast streams, and Icecast streams through the same FWDIRAP API.

The player renders inside a normal DOM container and exposes runtime methods and events for playback, metadata updates, artwork changes, sharing, and visualizer control.

For live radio integrations, run the player over HTTP or HTTPS and make sure the remote stream metadata can be reached from the browser. If the radio endpoint blocks cross-origin requests, use the corsproxy setting.

Installation

The download package includes ready-to-use demos plus the JavaScript and CSS assets required by the player. Start from a preset if you want a working reference, or add the player manually as shown below.

Upload the content folder together with the compiled JavaScript files, then include the stylesheet and the main player script in your page.

<head>

<!-- ... -->
<link rel="stylesheet" href="./content/global.css">
<script type="text/javascript" src="./js/FWDIRAP.js"></script>
<!-- ... -->

</head>

Initialize the player after the DOM is ready:

<script type="text/javascript">
	if(document.readyState === 'complete'){
		setupPlayer();
	}else{
		document.addEventListener('DOMContentLoaded', setupPlayer);
	}

	function setupPlayer(){
		new FWDIRAP({
			// Main settings.
			instance: 'fwdirap0',
			parentId: 'myDiv',
			initializeOnlyWhenVisible: true,
			genericCoverImage: 'media/images/logo.png', //'media/images/logo.png
			source: 'https://stunnel1.cyber-streaming.com:9120/',
			sourceType: 'shoutcast', // mp3, radio, hls, dash, youtube, vimeo, google-drive,
			corsproxy:"", // https://corsproxy.io/?
			startAtTime:"", // Time formant example [hours][minutes][seonds] - 00:00:20
			stopAtTime:"", // Time formant example [hours][minutes][seonds] - 00:00:40
			maxWidth: 900,
			maxHeight: 80,
			phoneHeight: 70,
			defaultPlaybackRate: 1,
			addKeyboardSupport: true,
			timeColor: "#FFFFFF",
			timeOutsideColor: "#000000",
			timeOffsetY: -4,
			timeColor: "#FFFFFF",
			playButtonBackgroundColor: '#FFFFFF',
			playButtonBackgroundColorHover: '#FFFFFF',
			playButtonIconColor: '#E81353',
			playButtonIconCutoutColorHover: '#000000',
			backgroundColor: '#FFFFFF',
			shadow: '0px 2px 12px rgba(0, 0, 0, 0.16)',
			borderColor: "#FFFFFF",
			borderSize: 0,
			borderRadius: 14,
			volume: 1,
			useVolumeToolTip: true,
			volumeTooltipBackgroundColor: "#000000",
			volumeTooltipTextColor: "#ffffff",
			volumeTooltipShadow: '0px 2px 12px rgba(0, 0, 0, 0.16)',
			autoplay: false,
			loop: false,

			// Info.
			liveIconColor: '#FFFFFF',
			liveIconOutsideColor: '#000000',
			defaultRadioName: 'Shoutcast Radio',
			radioNameOffsetY: 5,
			info: "A song from Mars A song from Mars A song from Mars A song from Mars",
			infoOffsetY: 6,
			radioNameColor: "#ffffff",
			radioNameOutsideColor: "#000000",
			infoColor: "#ffffff",
			infoOutsideColor: "#000000",

			// Artwork.
			showArtwork: true,
			artworkSrc: "media/image/1.jpg",
			artworkImageBacgroundColor:"#D9D9D9",

			// Share,
			shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
			shareButtonOffsetY: 4,
			shareWindowOffsetY: 4,
			shareBackgroundColor:"#FFF",
			shareText:"Share via",
			shareButtonColor:"#ffffff",
			shareButtonOutsideColor:"#000000",

			// Visualizer and volume scrubber.
			useVisualizer: false,
			volumeLineScrubberColor: '#ffffff',
			volumeLineScrubberOutsideColor: '#000000',
			volumeLineWidth: 1,
			visualizerOverlayColor: "#E81353",
			visualizerRandomPreset: false,
			visualizerPreset:"wave", // wave, bars
			visualizerColor:["#000000", "#000000", "#000000"],
			visualizerCapColor: "#000000",
			visualizerCapWidth: 1,
			visualizerCapGap: 0,
		});
	}
</script>

Create a holder element anywhere in the page and point parentId to that element ID.

<div id="myDiv"></div>

For multiple players on the same page, use a unique instance value and a different parentId for each one.

Source setup

The player reads one source at a time from the source and sourceType settings.

  • audio for direct audio files or remote MP3-style URLs.
  • hls for HLS playlists. If you pass an .m3u8 URL while using sourceType: 'audio', the player switches to HLS mode automatically.
  • shoutcast for Shoutcast endpoints. The player resolves the stream URL and updates metadata from the station stats endpoint.
  • icecast for Icecast endpoints. The player loads the stream URL and updates metadata from status-json.xsl.

If the radio metadata endpoint is blocked by CORS, prefix the request with corsproxy.

// Direct audio.
new FWDIRAP({
	instance: 'fwdirap0',
	parentId: 'audioHolder',
	source: 'https://yourdomain.com/live.mp3',
	sourceType: 'audio'
});

// HLS.
new FWDIRAP({
	instance: 'fwdirap1',
	parentId: 'hlsHolder',
	source: 'https://example.com/live/index.m3u8',
	sourceType: 'hls'
});

Build files

The project uses Vite to build the final JavaScript bundle. If you need to change runtime behavior, edit the source modules and rebuild instead of modifying generated files directly.

Settings

All player settings are passed directly into the constructor object.

Example

new FWDIRAP({
	// Main settings.
	instance: 'fwdirap0',
	parentId: 'myDiv',
	initializeOnlyWhenVisible: true,
	genericCoverImage: 'media/images/logo.png', //'media/images/logo.png
	source: 'https://stunnel1.cyber-streaming.com:9120/',
	sourceType: 'shoutcast', // mp3, radio, hls, dash, youtube, vimeo, google-drive,
	corsproxy:"", // https://corsproxy.io/?
	startAtTime:"", // Time formant example [hours][minutes][seonds] - 00:00:20
	stopAtTime:"", // Time formant example [hours][minutes][seonds] - 00:00:40
	maxWidth: 900,
	maxHeight: 80,
	phoneHeight: 70,
	defaultPlaybackRate: 1,
	addKeyboardSupport: true,
	timeColor: "#FFFFFF",
	timeOutsideColor: "#000000",
	timeOffsetY: -4,
	timeColor: "#FFFFFF",
	playButtonBackgroundColor: '#FFFFFF',
	playButtonBackgroundColorHover: '#FFFFFF',
	playButtonIconColor: '#E81353',
	playButtonIconCutoutColorHover: '#000000',
	backgroundColor: '#FFFFFF',
	shadow: '0px 2px 12px rgba(0, 0, 0, 0.16)',
	borderColor: "#FFFFFF",
	borderSize: 0,
	borderRadius: 14,
	volume: 1,
	useVolumeToolTip: true,
	volumeTooltipBackgroundColor: "#000000",
	volumeTooltipTextColor: "#ffffff",
	volumeTooltipShadow: '0px 2px 12px rgba(0, 0, 0, 0.16)',
	autoplay: false,
	loop: false,

	// Info.
	liveIconColor: '#FFFFFF',
	liveIconOutsideColor: '#000000',
	defaultRadioName: 'Shoutcast Radio',
	radioNameOffsetY: 5,
	info: "A song from Mars A song from Mars A song from Mars A song from Mars",
	infoOffsetY: 6,
	radioNameColor: "#ffffff",
	radioNameOutsideColor: "#000000",
	infoColor: "#ffffff",
	infoOutsideColor: "#000000",

	// Artwork.
	showArtwork: true,
	artworkSrc: "media/image/1.jpg",
	artworkImageBacgroundColor:"#D9D9D9",

	// Share,
	shareButtons:['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
	shareButtonOffsetY: 4,
	shareWindowOffsetY: 4,
	shareBackgroundColor:"#FFF",
	shareText:"Share via",
	shareButtonColor:"#ffffff",
	shareButtonOutsideColor:"#000000",

	// Visualizer and volume scrubber.
	useVisualizer: false,
	volumeLineScrubberColor: '#ffffff',
	volumeLineScrubberOutsideColor: '#000000',
	volumeLineWidth: 1,
	visualizerOverlayColor: "#E81353",
	visualizerRandomPreset: false,
	visualizerPreset:"wave", // wave, bars
	visualizerColor:["#000000", "#000000", "#000000"],
	visualizerCapColor: "#000000",
	visualizerCapWidth: 1,
	visualizerCapGap: 0,
});

instance

Type: (String) - required

The global instance name used to access the public API.

parentId

Type: (String) - required

The ID of the DOM element that will host the player.

initializeOnlyWhenVisible

Type: (String) - example: yes

When set to yes, initialization can be deferred until the player enters the viewport in integrations that use the visibility helper modules bundled with the demos.

genericCoverImage

Type: (String) - default: unset

Optional fallback cover image path used by the demo presets before live artwork is updated.

source

Type: (String) - required

The stream or file URL to play.

sourceType

Type: (String) - default: audio

Supported values are audio, hls, shoutcast, and icecast.

corsproxy

Type: (String) - default: empty string

Optional proxy prefix used for Shoutcast and Icecast metadata requests.

startAtTime

Type: (String or Number) - default: unset

Optional time to jump to when playback starts.

stopAtTime

Type: (String or Number) - default: unset

Optional time at which playback will stop automatically.

maxWidth

Type: (Number) - default: 600

The maximum player width in pixels.

maxHeight

Type: (Number) - default: 100

The default player height in pixels.

phoneHeight

Type: (Number) - default: same as maxHeight

The height used on phones.

defaultPlaybackRate

Type: (Number) - default: 1

Initial playback speed.

addKeyboardSupport

Type: (Boolean)

Enable keyboard shortcuts for supported actions in the player UI.

timeColor

Type: (String) - default: same as infoColor

Primary time label color.

timeOutsideColor

Type: (String) - default: same as infoOutsideColor

Outline or exterior color for the time label.

timeOffsetY

Type: (Number) - default: 0

Vertical offset for the time display.

playButtonBackgroundColor

Type: (String) - default: #E81353

Play button background color.

playButtonBackgroundColorHover

Type: (String) - default: #E81353

Play button background color on hover.

playButtonIconColor

Type: (String) - default: #ffffff

Primary color used by the play button icon.

playButtonIconCutoutColorHover

Type: (String) - default: #ffffff

Hover cutout color for the play button icon.

backgroundColor

Type: (String) - default: #1a1a1a

Main player background color.

shadow

Type: (String) - default: none

CSS box-shadow applied to the player shell.

borderColor

Type: (String) - default: same as visualizerOverlayColor

Border color.

borderSize

Type: (Number) - default: 0

Border thickness in pixels.

borderRadius

Type: (Number) - default: 0

Player corner radius in pixels.

volume

Type: (Number) - default: 1

Initial volume as a value between 0 and 1.

useVolumeToolTip

Type: (Boolean) - default: false

Shows a tooltip above the volume scrubber. The public property name is intentionally spelled useVolumeToolTip.

volumeTooltipBackgroundColor

Type: (String) - default: #000000

Volume tooltip background color.

volumeTooltipTextColor

Type: (String) - default: #ffffff

Volume tooltip text color.

volumeTooltipShadow

Type: (String) - default: empty string

Optional CSS box-shadow applied to the volume tooltip.

autoplay

Type: (Boolean) - default: false

Starts playback automatically when the browser allows it.

loop

Type: (Boolean) - default: false

When enabled, playback restarts automatically after completion.

Info visibility: always enabled

The info row is shown by default and no longer requires a showInfo setting. Use empty defaultRadioName and info values when you want no text displayed.

liveIconColor

Type: (String) - default: same as infoColor

Primary color for the live indicator.

liveIconOutsideColor

Type: (String) - default: same as infoOutsideColor

Outline or exterior color for the live indicator.

defaultRadioName

Type: (String) - default: empty string

Fallback station name shown before live metadata arrives.

radioNameOffsetY

Type: (Number) - default: 0

Vertical offset for the radio name text.

info

Type: (String) - default: empty string

Default secondary info text.

infoOffsetY

Type: (Number) - default: 0

Vertical offset for the secondary info text.

radioNameColor

Type: (String) - default: #ffffff

Primary radio name color.

radioNameOutsideColor

Type: (String) - default: #000000

Outline or exterior radio name color.

infoColor

Type: (String) - default: #ffffff

Primary metadata text color.

infoOutsideColor

Type: (String) - default: #000000

Outline or exterior metadata text color.

showArtwork

Type: (Boolean) - default: true

Shows the artwork image panel.

artworkSrc

Type: (String) - default: empty string

Initial artwork image source.

artworkImageBacgroundColor

Type: (String) - default: #D9D9D9

Background color behind the artwork image. The public property name is intentionally spelled artworkImageBacgroundColor.

shareButtons

Type: (Array) - default: []

List of share networks to show.

shareButtonOffsetY

Type: (Number) - default: 0

Vertical offset for the share button.

shareWindowOffsetY

Type: (Number) - default: 0

Vertical offset for the share window.

shareBackgroundColor

Type: (String) - default: #FFF

Background color used by the share window.

shareText

Type: (String) - default: Share on

Heading text shown inside the share window.

shareButtonColor

Type: (String) - default: #000000

Primary share button color.

shareButtonOutsideColor

Type: (String) - default: same as shareButtonColor

Outline or exterior share button color.

volumeLineScrubberColor

Type: (String) - default: #000000

Primary color for the volume scrubber line.

volumeLineScrubberOutsideColor

Type: (String) - default: same as volumeLineScrubberColor

Outline or exterior color for the volume scrubber line.

volumeLineWidth

Type: (Number) - default: 2

Volume line thickness in pixels.

useVisualizer

Type: (Boolean) - default: true

Shows or hides the visualizer canvas. Set it to false if you want to keep the volume scrubber interaction but hide the animated visualizer.

visualizerOverlayColor

Type: (String) - default: rgba(255, 0, 0, 0.5)

Overlay color used by the visualizer area and some fallback border styling.

visualizerRandomPreset

Type: (Boolean) - default: false

Randomizes the visualizer preset when enabled.

visualizerPreset

Type: (String) - default: wave

The visualizer style.

visualizerColor

Type: (Array) - default: ["#E81353", "#E81353", "#E81353"]

Array of colors used by the visualizer bars or wave.

visualizerCapColor

Type: (String) - default: #333333

Cap color used by the bar visualizer.

visualizerCapWidth

Type: (Number) - default: 2

Width of the visualizer cap.

visualizerCapGap

Type: (Number) - default: 1

Gap between the bar and its cap.

Methods

Methods are called on the instance name that you configured in the constructor, for example fwdirap0.play().

setSource

.setSource(source, type)

Loads a new source and updates the player mode.

getSource

.getSource()

Returns the current source URL.

play

.play()

Starts playback.

pause

.pause()

Pauses playback.

stop

.stop(resetRadio)

Stops playback and resets internal playback state.

startToScrub

.startToScrub()

Signals the player that manual scrubbing has started.

stopToScrub

.stopToScrub()

Signals the player that manual scrubbing has finished.

scrub

.scrub(percent)

Seeks using a normalized value between 0 and 1.

scrubbAtTime

.scrubbAtTime(duration)

Seeks to an absolute time. The public name intentionally keeps the original spelling.

setVolume

.setVolume(volume, updateController)

Sets the player volume.

getVolume

.getVolume()

Returns the current volume.

setPlaybackRate

.setPlaybackRate(rate)

Sets the playback speed.

getPlaybackRate

.getPlaybackRate()

Returns the current playback speed.

setInfo

.setInfo(radioName, info)

Updates the displayed station name and metadata text.

getInfo

.getInfo()

Returns the current info string.

setArtworksource

.setArtworksource(source)

Updates the artwork image. The public name intentionally keeps the original spelling.

getArtworksource

.getArtworksource()

Returns the current artwork source.

getCurrentTime

.getCurrentTime()

Returns the current playback time.

getDuration

.getDuration()

Returns the media duration.

startVisualizer

.startVisualizer()

Starts or reinitializes the visualizer.

pauseVisualizer

.pauseVisualizer()

Pauses the visualizer animation.

destroy

.destroy()

Destroys the instance and removes the player from the DOM.

Events

Register runtime events with addEventListener on the player instance.

let fwdirapAPI = setInterval(() => {
	if(window['fwdirap0']){
		clearInterval(fwdirapAPI);
		fwdirap0.addEventListener(FWDIRAP.PLAY, onPlay);
		fwdirap0.addEventListener(FWDIRAP.ERROR, onError);
	}
}, 100);

function onPlay(){
	console.log('Playback started');
}

function onError(e){
	console.log(e.error);
}

FWDIRAP.START

FWDIRAP.START

Dispatched when playback starts and the player is ready to report progress.

FWDIRAP.PLAY

FWDIRAP.PLAY

Dispatched when playback enters the playing state.

FWDIRAP.PAUSE

FWDIRAP.PAUSE

Dispatched when playback is paused.

FWDIRAP.STOP

FWDIRAP.STOP

Dispatched when playback is stopped.

FWDIRAP.ERROR

FWDIRAP.ERROR

Dispatched when playback or stream resolution fails. The payload contains an error property.

FWDIRAP.PLAY_COMPLETE

FWDIRAP.PLAY_COMPLETE

Dispatched when playback reaches the end.

FWDIRAP.UPDATE

FWDIRAP.UPDATE

Dispatched during progress updates. The payload contains percent.

FWDIRAP.UPDATE_TIME

FWDIRAP.UPDATE_TIME

Dispatched during time updates. The payload contains curTime and totalTime.

FWDIRAP.UPDATE_PLAYBACKRATE

FWDIRAP.UPDATE_PLAYBACKRATE

Dispatched after the playback rate changes. The payload contains playbackRate.

FWDIRAP.UPDATE_VOLUME

FWDIRAP.UPDATE_VOLUME

Dispatched after the volume changes. The payload contains volume.

Notes

This documentation reflects the current JavaScript API exposed by the packaged FWDIRAP runtime. Some public names intentionally keep their original spellings for backward compatibility, including useVolumeToolTip, artworkImageBacgroundColor, setArtworksource, and scrubbAtTime.

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.

© Copyright FWDesign