soundcloud volume control (사운드클라우드 플에이어 컨트롤)js

사운드 클라우드 embeded 할때 플레이어 컨트롤 박스 출력시키는 js

내용중에 js를 따로 소스로 저장해서 사용하셔도 됩니다.

기본 브라우저 볼륨 조절은 *10 숫자부분으로 조절해주세요 .

두군데 동시에 해야합니다

첫번째는 시작할때 디폴트 볼륨 (50입니다) 위에 보시면 

unmutedVolume = 0.5로 되어있습니다.

this.setVolume(this.unmutedVolume*10)  

this.player.setVolume(n*10)

아래는 실제 반영될 볼륨입니다.

즉 볼륨 바에서는 1~10까지 있고 이걸 실제 볼륨으로 반영되는 비율입니다.

소스는

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <!--

<link href="soundcloud/Content/sc-controls.min.css" rel="stylesheet">

-->

<style>

.playControls__wrapper *,.playControls__wrapper *:before,.playControls__wrapper *:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.playControls__wrapper button{cursor:pointer}.playControls__wrapper .sc-ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent}.playControls__wrapper .playControls__icon{border:0;height:46px;float:left;outline:0;padding:0}.playControls__wrapper .playControls__icon.disabled{opacity:.3;cursor:default}.playControls__wrapper .skipControl{width:33px;background-repeat:no-repeat}.playControls__wrapper .skipControl__previous{background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDEyIDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8dGl0bGU+UHJldjwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUGxheWVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjY2OC4wMDAwMDAsIC0zOTcuMDAwMDAwKSIgZmlsbD0iIzMzMzMzMyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNjc4LDQwMyBMMjY2OCwzOTcgTDI2NjgsNDExIEwyNjc4LDQwNSBMMjY3OCw0MTEgTDI2ODAsNDExIEwyNjgwLDM5NyBMMjY3OCwzOTcgTDI2NzgsNDAzIFoiIGlkPSJQcmV2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNjc0LjAwMDAwMCwgNDA0LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMjY3NC4wMDAwMDAsIC00MDQuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');background-position:40% center}.playControls__wrapper .playControl{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE3cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDE3IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8dGl0bGU+UGxheTwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUGxheWVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjc1OC4wMDAwMDAsIC0zOTQuMDAwMDAwKSIgZmlsbD0iIzMzMzMzMyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNzU4LDM5NCBMMjc1OCw0MTQgTDI3NzUsNDA0IEwyNzU4LDM5NCBaIiBpZD0iUGxheSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==') no-repeat 55% center;width:46px}.playControls__wrapper .playControl.playing{background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0cHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDE0IDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8dGl0bGU+UGF1c2U8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IlBsYXllciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MTAuMDAwMDAwLCAtMzk0LjAwMDAwMCkiIGZpbGw9IiMzMzMzMzMiPgogICAgICAgICAgICA8ZyBpZD0iUGF1c2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI3MTAuMDAwMDAwLCAzOTQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iUmVjdGFuZ2xlLTEzMS0rLVJlY3RhbmdsZS0xMzEiPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTMxIiB4PSIwIiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIyMCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTMxIiB4PSI5IiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIyMCI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');background-position:center center}.playControls__wrapper .skipControl__next{background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMTRweCIgdmlld0JveD0iMCAwIDEyIDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8dGl0bGU+U2tpcDwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUGxheWVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjYyMC4wMDAwMDAsIC0zOTcuMDAwMDAwKSIgZmlsbD0iIzMzMzMzMyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNjMwLDQwMyBMMjYyMCwzOTcgTDI2MjAsNDExIEwyNjMwLDQwNSBMMjYzMCw0MTEgTDI2MzIsNDExIEwyNjMyLDM5NyBMMjYzMCwzOTcgTDI2MzAsNDAzIFoiIGlkPSJTa2lwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');background-position:60% center}.playControls__wrapper .volume__button{background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iMTNweCIgdmlld0JveD0iMCAwIDE1IDEzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8dGl0bGU+Vm9sdW1lIE1lZGl1bTwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUGxheWVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQ0MS4wMDAwMDAsIC0zMTUuMDAwMDAwKSIgZmlsbD0iIzMzMzMzMyI+CiAgICAgICAgICAgIDxnIGlkPSJWb2x1bWUtTWVkaXVtIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDQxLjAwMDAwMCwgMzE1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuNTQ1NjY2NjcsNCBMMCw0IEwwLDkgTDQuNTQ1NjY2NjcsOSBMOSwxMi41IEw5LDAuNSBMNC41NDU2NjY2Nyw0IFoiIGlkPSJGaWxsLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMi4wMjQ2Njk5LDQuNzA1MzMwMDkgQzEzLjAxMDc3NjcsNS42OTE0MzY4NyAxMy4wMTA3NzY3LDcuMzA4NTYzMTMgMTIuMDI0NjY5OSw4LjI5NDY2OTkxIEwxMS42OTI2Njk5LDguNjI2NjY5OTEgQzExLjM5OTc3NjcsOC45MTk1NjMxMyAxMS4zOTk3NzY3LDkuMzk0NDM2ODcgMTEuNjkyNjY5OSw5LjY4NzMzMDA5IEMxMS45ODU1NjMxLDkuOTgwMjIzMyAxMi40NjA0MzY5LDkuOTgwMjIzMyAxMi43NTMzMzAxLDkuNjg3MzMwMDkgTDEzLjA4NTMzMDEsOS4zNTUzMzAwOSBDMTQuNjU3MjIzMyw3Ljc4MzQzNjg3IDE0LjY1NzIyMzMsNS4yMTY1NjMxMyAxMy4wODUzMzAxLDMuNjQ0NjY5OTEgTDEyLjc1MzMzMDEsMy4zMTI2Njk5MSBDMTIuNDYwNDM2OSwzLjAxOTc3NjcgMTEuOTg1NTYzMSwzLjAxOTc3NjcgMTEuNjkyNjY5OSwzLjMxMjY2OTkxIEMxMS4zOTk3NzY3LDMuNjA1NTYzMTMgMTEuMzk5Nzc2Nyw0LjA4MDQzNjg3IDExLjY5MjY2OTksNC4zNzMzMzAwOSBMMTIuMDI0NjY5OSw0LjcwNTMzMDA5IFoiIGlkPSJTdHJva2UtMyI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K') no-repeat left center;outline:0;width:20px;height:46px;margin-left:20px;float:left;padding:0}.playControls__wrapper .volume__button.muted{background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTNweCIgdmlld0JveD0iMCAwIDIwIDEzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8dGl0bGU+Vm9sdW1lIE11dGVkPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJQbGF5ZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzc3LjAwMDAwMCwgLTMxNS4wMDAwMDApIiBmaWxsPSIjMzMzMzMzIj4KICAgICAgICAgICAgPGcgaWQ9IlZvbHVtZS1NdXRlZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjM3Ny4wMDAwMDAsIDMxNS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjU0NTY2NjY3LDQgTDAsNCBMMCw5IEw0LjU0NTY2NjY3LDkgTDksMTIuNSBMOSwwLjUgTDQuNTQ1NjY2NjcsNCBaIiBpZD0iRmlsbC0xIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iTGluZS0rLUxpbmUtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEuMDAwMDAwLCAyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04LjAzMDMzMDA5LDIuMDMwMzMwMDkgTDguNTYwNjYwMTcsMS41IEw3LjUsMC40MzkzMzk4MjggTDYuOTY5NjY5OTEsMC45Njk2Njk5MTQgTDAuOTY5NjY5OTE0LDYuOTY5NjY5OTEgTDAuNDM5MzM5ODI4LDcuNSBMMS41LDguNTYwNjYwMTcgTDIuMDMwMzMwMDksOC4wMzAzMzAwOSBMOC4wMzAzMzAwOSwyLjAzMDMzMDA5IFoiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIuMDMwMzMwMDksMC45Njk2Njk5MTQgTDEuNSwwLjQzOTMzOTgyOCBMMC40MzkzMzk4MjgsMS41IEwwLjk2OTY2OTkxNCwyLjAzMDMzMDA5IEw2Ljk2OTY2OTkxLDguMDMwMzMwMDkgTDcuNSw4LjU2MDY2MDE3IEw4LjU2MDY2MDE3LDcuNSBMOC4wMzAzMzAwOSw2Ljk2OTY2OTkxIEwyLjAzMDMzMDA5LDAuOTY5NjY5OTE0IFoiIGlkPSJMaW5lLTIiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==')}.playControls__wrapper .volume__button[data-level='10']{background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE5cHgiIGhlaWdodD0iMTNweCIgdmlld0JveD0iMCAwIDE5IDEzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8dGl0bGU+Vm9sdW1lIE1heDwvdGl0bGU+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUGxheWVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjUwMC4wMDAwMDAsIC0zMTUuMDAwMDAwKSIgZmlsbD0iIzMzMzMzMyI+CiAgICAgICAgICAgIDxnIGlkPSJWb2x1bWUtTWF4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNTAwLjAwMDAwMCwgMzE1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkZpbGwtMS0rLVN0cm9rZS0zIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNC41NDU2NjY2Nyw0IEwwLDQgTDAsOSBMNC41NDU2NjY2Nyw5IEw5LDEyLjUgTDksMC41IEw0LjU0NTY2NjY3LDQgWiIgaWQ9IkZpbGwtMSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS40Mjc2Njk5LDIuMDgwMzMwMDkgQzE3Ljg1Nzc3NjcsNC41MTA0MzY4NyAxNy44NTc3NzY3LDguNDg5NTYzMTMgMTUuNDI3NjY5OSwxMC45MTk2Njk5IEwxNC43MjA2Njk5LDExLjYyNjY2OTkgQzE0LjQyNzc3NjcsMTEuOTE5NTYzMSAxNC40Mjc3NzY3LDEyLjM5NDQzNjkgMTQuNzIwNjY5OSwxMi42ODczMzAxIEMxNS4wMTM1NjMxLDEyLjk4MDIyMzMgMTUuNDg4NDM2OSwxMi45ODAyMjMzIDE1Ljc4MTMzMDEsMTIuNjg3MzMwMSBMMTYuNDg4MzMwMSwxMS45ODAzMzAxIEMxOS41MDQyMjMzLDguOTY0NDM2ODcgMTkuNTA0MjIzMyw0LjAzNTU2MzEzIDE2LjQ4ODMzMDEsMS4wMTk2Njk5MSBMMTUuNzgxMzMwMSwwLjMxMjY2OTkxNCBDMTUuNDg4NDM2OSwwLjAxOTc3NjY5NTMgMTUuMDEzNTYzMSwwLjAxOTc3NjY5NTMgMTQuNzIwNjY5OSwwLjMxMjY2OTkxNCBDMTQuNDI3Nzc2NywwLjYwNTU2MzEzMyAxNC40Mjc3NzY3LDEuMDgwNDM2ODcgMTQuNzIwNjY5OSwxLjM3MzMzMDA5IEwxNS40Mjc2Njk5LDIuMDgwMzMwMDkgWiBNMTIuMDI0NjY5OSw0LjcwNTMzMDA5IEMxMy4wMTA3NzY3LDUuNjkxNDM2ODcgMTMuMDEwNzc2Nyw3LjMwODU2MzEzIDEyLjAyNDY2OTksOC4yOTQ2Njk5MSBMMTEuNjkyNjY5OSw4LjYyNjY2OTkxIEMxMS4zOTk3NzY3LDguOTE5NTYzMTMgMTEuMzk5Nzc2Nyw5LjM5NDQzNjg3IDExLjY5MjY2OTksOS42ODczMzAwOSBDMTEuOTg1NTYzMSw5Ljk4MDIyMzMgMTIuNDYwNDM2OSw5Ljk4MDIyMzMgMTIuNzUzMzMwMSw5LjY4NzMzMDA5IEwxMy4wODUzMzAxLDkuMzU1MzMwMDkgQzE0LjY1NzIyMzMsNy43ODM0MzY4NyAxNC42NTcyMjMzLDUuMjE2NTYzMTMgMTMuMDg1MzMwMSwzLjY0NDY2OTkxIEwxMi43NTMzMzAxLDMuMzEyNjY5OTEgQzEyLjQ2MDQzNjksMy4wMTk3NzY3IDExLjk4NTU2MzEsMy4wMTk3NzY3IDExLjY5MjY2OTksMy4zMTI2Njk5MSBDMTEuMzk5Nzc2NywzLjYwNTU2MzEzIDExLjM5OTc3NjcsNC4wODA0MzY4NyAxMS42OTI2Njk5LDQuMzczMzMwMDkgTDEyLjAyNDY2OTksNC43MDUzMzAwOSBaIiBpZD0iU3Ryb2tlLTMiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==')}.playControls__wrapper .slider{position:relative;border:none;border-radius:0;width:50px;height:5px;background:#e4f0fb;margin:21px 0 20px 7px;float:left}.playControls__wrapper .ui-slider .ui-slider-range{position:absolute;border:0;top:0;height:100%;border-radius:0}.playControls__wrapper .ui-slider .ui-slider-handle{position:absolute;z-index:2;width:11px;height:11px;border-radius:10px;cursor:pointer;outline:none;top:-4px;margin-left:-6px}

</style>

    <style>

        #soundcloudControls {

            position: relative;

            top: -55px;

            left: 140px;

            display: inline-block;

            border: 1px solid #d0d0d0;

            background-color: #fff;

        }

    </style>

    <iframe id="soundcloud" style="width: 100%; height: 300px;" scrolling="no" frameborder="0" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/385282922&amp;color=%23b4b4b4&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&quot;"></iframe>

    <div id="soundcloudControls"></div>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

    <script src="https://w.soundcloud.com/player/api.js"></script>

<!--

    <script src="soundcloud/&quot;Scripts/sc-controls.min.js&quot;"></script>

-->

<script>

(function(){function n(n,t){this.player=n;this.controls=t;this.controls.addClass("playControls__wrapper")}$.fn.soundCloudControls=function(t,i){i===undefined&&(i="#FF4800");var r=SC.Widget(t);return this.each(function(){var t=new n(r,$(this));r.bind(SC.Widget.Events.READY,function(){t.init(i)})})};n.prototype.init=function(n){var t=this,i=$("<div>").addClass("playControls__controls"),r;this.prevControl=$("<button>").addClass("skipControl").addClass("playControls__icon").addClass("sc-ir").addClass("skipControl__previous").text("Skip to previous");this.playControl=$("<button>").addClass("playControl").addClass("playControls__icon").addClass("sc-ir").text("Play current");this.nextControl=$("<button>").addClass("skipControl").addClass("playControls__icon").addClass("sc-ir").addClass("skipControl__next").text("Skip to next");this.volumeControl=$("<button>").addClass("volume__button").addClass("volume__speakerIcon").addClass("sc-ir").text("Toggle mute");this.slider=$("<div>").addClass("slider");i.append(this.prevControl);i.append(this.playControl);i.append(this.nextControl);i.append(this.volumeControl);i.append(this.slider);this.controls.append(i);this.unmutedVolume=.5;window.localStorage&&(r=window.localStorage.getItem("SCControlsVol"),r!==null&&(this.unmutedVolume=Number(r)/100));this.setVolume(this.unmutedVolume*10);this.player.bind(SC.Widget.Events.PLAY,function(){t.playControl.addClass("playing").text("Pause current")});this.player.bind(SC.Widget.Events.PAUSE,function(){t.playControl.removeClass("playing").text("Play current")});this.prevControl.click(function(){t.goBack()});this.playControl.click(function(){t.togglePlay()});this.nextControl.click(function(){t.goForward()});this.volumeControl.click(function(){t.toggleMute()});this.slider.slider({range:"min",value:this.unmutedVolume*100,min:0,max:100,create:function(){$(this).find(".ui-slider-range").css("background",n)},slide:function(n,i){t.setVolume(i.value/10)},change:function(n,t){window.localStorage&&window.localStorage.setItem("SCControlsVol",t.value)}})};n.prototype.setVolume=function(n){this.player.setVolume(n*10);n===0?this.volumeControl.addClass("muted"):this.volumeControl.removeClass("muted");this.volumeControl.attr("data-level",Math.ceil(n*10))};n.prototype.togglePlay=function(){this.player.toggle()};n.prototype.goBack=function(){var n=this;this.player.getPosition(function(t){n.player.seekTo(0);t<3e3&&n.player.prev()})};n.prototype.goForward=function(){this.player.next()};n.prototype.toggleMute=function(){var n=this;this.player.getVolume(function(t){t===0?(n.setVolume(n.unmutedVolume),n.slider.slider("value",n.unmutedVolume*100)):(n.unmutedVolume=t,n.setVolume(0),n.slider.slider("value",0))})}})();

//# sourceMappingURL=sc-controls.min.js.map

</script>

    <script>

        $("#soundcloudControls").soundCloudControls("soundcloud", "#9C5857");

    </script>