@magic-modules/sound-cloud

this is the @magic-modules SoundCloud component.

embeds soundcloud tracks, playlist and user widgets.

installation

npm install @magic-modules/sound-cloud

usage

in a page or module View

javascript

SoundCloud(599883213)

markdown / html

<SoundCloud>599883213</SoundCloud>

renders

tracks

the track type shows a single track

javascript

SoundCloud({ type: 'track', id: 599883213 })

markdown / html

<SoundCloud type="track" id="599883213"></SoundCloud>

renders

playlists

the playlists type shows a playlist of songs

javascript

SoundCloud({ type: 'playlist', id: 641153793 })

markdown / html

<SoundCloud type="playlist" id="641153793"></SoundCloud>

renders

users

the users type shows a user profile.

javascript

SoundCloud({ type: 'user', id: 151832569 })

markdown / html

<SoundCloud type="user" id="151832569"></SoundCloud>

renders

default arguments

@magic tries to keep the default arguments for soundcloud sane.

markdown

<SoundCloud  visual        ="true"         // set to false to get a smaller view with 166px height  show_teaser   ="false"        // show an overlay with soundcloud ads  show_reposts  ="false"        // show reposts for this track/user/playlist  show_user     ="true"         // show the user that uploaded the track or playlist  show_comments ="false"        // show comments people left  auto_play     ="false"        // auto play video (will not work in many browsers anyways)  hide_related  ="true"         // hide artists that might match or not  height        ="300" || "166" // default height for visual true || false  width         ="100%"  scrolling     ="no"  frameborder   ="no"><SoundCloud>}

javascript

SoundCloud({  visual: true,         // set to false to get a smaller view with 166px height  show_teaser: false,        // show an overlay with soundcloud ads  show_reposts: false,        // show reposts for this track/user/playlist  show_user: true,         // show the user that uploaded the track or playlist  show_comments: false,        // show comments people left  auto_play: false,        // auto play video (will not work in many browsers anyways)  hide_related: true,         // hide artists that might match or not  height: 300 || 166, // default height for visual true || false  width: '100%',  scrolling: "no",  frameborder: "no",}),

source

the source for this page is in the example directory and gets built and published to github using @magic/core