Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sntiagomoreno/howlplayer
A howler-based web player with Deezer, Spotify, SoundCloud and local sounds as sources.
https://github.com/sntiagomoreno/howlplayer
audio-player deezer howler soundcloud spotify
Last synced: 21 days ago
JSON representation
A howler-based web player with Deezer, Spotify, SoundCloud and local sounds as sources.
- Host: GitHub
- URL: https://github.com/sntiagomoreno/howlplayer
- Owner: sntiagomoreno
- Created: 2019-04-23T04:04:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T20:16:59.000Z (about 2 years ago)
- Last Synced: 2024-12-05T06:34:58.545Z (about 1 month ago)
- Topics: audio-player, deezer, howler, soundcloud, spotify
- Language: JavaScript
- Homepage:
- Size: 1.66 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# howlplayer #
A howler-based wrapper and functional player for Spotify or Deezer albums, SoundCloud playlists or your local sounds.
## Usage ##
`npm i sntiagomoreno/howlplayer` or `yarn add sntiagomoreno/howlplayer`
### Deezer (Recommended) ###
**Note**: If you're trying to get preview sounds Deezer is a better option than Spotify as you will not need an access token.
```
import Player from 'howlplayer'
let player = new Player({
src: {
name: 'deezer',
id: '86241112' // album ID
},
render: {
ui: true // append UI to DOM
}
})
```
### Spotify ###
**Note**: Spotify's API doesn't offer a no-expiry access token. You will have to refresh it on your end.
```
import Player from 'howlplayer'
let player = new Player({
src: {
name: 'spotify',
id: '0DRUOQBsax8QLUVctbEIAT', // album ID
token: 'YOUR_ACCESS_TOKEN' // required for Spotify
},
render: {
ui: false // set to false if you want a custom function to render your data
renderMethod: myFunction
}
})
```
### SoundCloud ###
**Note**: In order to access SoundCloud's API you will need an access token. Sadly, they've stopped letting users create new applications so there's no way to get a new API key. This is only useful if you've previously been granted one.
```
import Player from 'howlplayer'
let player = new Player({
src: {
name: 'soundcloud',
id: '405726', // album ID
token: 'YOUR_ACCESS_TOKEN' // required for SoundCloud
},
render: {
ui: true
}
})
```
### Local ###
**Note**: Please [check this](https://github.com/sntiagomoreno/howlplayer/blob/master/dist/tracks.json) to see how your json file should be structured. You can add as many properties you want within `tracks` and `info` properties.
```
import Player from 'howlplayer'
let player = new Player({
src: {
name: 'local',
data: 'tracks.json'
},
render: {
ui: true
}
})
```
### Custom renderer ###
You can use your own method to render the data received.
```
import Player from 'howlplayer'
let player = new Player({
src: {
name: 'deezer',
id: '86241112'
},
render: {
ui: false,
renderMethod: myFunction
}
})
// Your function must have one parameter to which the data gets passed
function myFunction(arg){
var data = arg
console.log(data)
}
```
## Options ##
| option | description | default |
|---------------------|-------------|-----------|
| `el` | Selector to append the player | `body` |
| `src.name ` | Source name `local` `deezer` `spotify` or `soundcloud` | `local` |
| `src.token ` | Access token or API key (required for Spotify and SoundCloud) | `null` |
| `src.id ` | ID of the album to get | |
| `src.data ` | JSON File for loading local sounds (required when `src.name` is `local`) | |
| `render.ui ` | Render basic player UI elements | `false` |
| `render.renderMethod` | Function name to render content. `render.ui` must be `false` | `'default'` |
| `showArtist` | Show artist/author name next to the song's name | `false` |
## Dependencies ##
* Howler
* Axios
### TODO ###
- Options for album, track or playlist in Spotify and Deezer.
- Improve code structure.
- Use fetch over axios.
- Add demo.
- Add development to docs.