If you’re new to TypeScript and React, checkout this handy cheatsheet
You can install Adori Player with NPM,
Yarn, or a good old' <script>
via
unpkg.com.
npm install adori-player-sdk
or
yarn add adori-player-sdk
This package is compatible with All the SPA's which uses node 12+ and works with Javascript DOM.
Watch Live Demo here
create a div tag in your html,jsx or vue template with and id
<div id="player"></div>
in the script file,react functions or vue methods or lifecycle hooks
new Player('player')
/** Note: you need to pass the id string as a parameter which
is declared above */
/** Above code will create player but will not play any episode until
* you pass episodeUid Option.
* for more info check options table
*/
new Player('player',{
episodeUid:'Iys4HBX4ZbYPoFGJ',
onload:callBack
})
/** Note you also have onload callBack which you can pass
* You have to pass episodeUid or audioUrl in order to play any audio
* check options table for more functionality
*/
Options | Description | DefaultValue | Accepted Value | Example |
---|---|---|---|---|
width | Specify width of player | '320px' | String | new Player('player',{width:'300px'}) |
height | Specify height of player | '560px' | String | new Player('player',{height:'700px'}) |
episodeUid | You need to pass the episode uid that you get from adori | NA | String | new Player('player',{episodeUid:'Iys4HBX4ZbYPoFGJ'}) |
audio | If you want to play an audio from an external audio source then use audio query param | NA | String URL | new Player('player',{audioUrl:'url'}) |
autoplay | This parameter specifies whether the initial Episode will automatically start to play when the player loads | 0 | 0 or 1 |
new Player('player',{autoplay:1}) Note: this will only works on some browsers or you need to use mute param to mute episode and autoplay |
controls | This parameter indicates whether the web player controls are displayed | 1 | 0 or 1 | new Player('player',{controls:1}) |
seekBar | This parameter indicates whether the audio seekBar is displayed when controls are disabled | 0 | 0 or 1 |
new Player('player',{seekBar:1}) Note: this param only works if the controls are disabled |
miniSeekBar | This parameter indicates whether the audio seekBar should be displayed when miniPlayer is active | 0 | 0 or 1 | new Player('player',{miniSeekBar:1}) |
titleBar | This parameter indicates whether the title bar should be displayed when miniPlayer is active | 1 | 0 or 1 | new Player('player',{titleBar:1}) |