Custom Soundcloud Player
How do I make an custom soundcloud player?
Love messing with the soundcloud API.Clicking near the end and the start to skip back and forth, you can seek too.. What is a custom soundcloud player? How do you make a custom soundcloud player? This script and codes were developed by Nick Colley on 12 November 2022, Saturday.
Custom Soundcloud Player - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Soundcloud Player</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='//w.soundcloud.com/player/api.js'></script>
<div class="player"> <span class='info'></span> <div class="waveform"></div> <div class="position"></div>
</div>
<iframe class="sc-widget" src="//w.soundcloud.com/player/?url=//soundcloud.com/internetsyd"> </iframe> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Custom Soundcloud Player - Script Codes CSS Codes
body { overflow: hidden; background-color: #eee;
}
iframe { display: none; }
.player { cursor: pointer; position: absolute; top: 0; bottom: 0; margin: auto; height: 200px; width: 100%; font-family: Helvetica, Arial, sans-serif; background-color: #efefef; background-size: cover; background-position: center; -webkit-transition: background-image 1s linear; transition: background-image 1s linear;
}
.waveform { z-index: 3; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: 100% 100%; -webkit-transition: background-image 1s linear; transition: background-image 1s linear;
}
.position { opacity: 0.5; position: absolute; height: 100%; width: 0; background-color: white; -webkit-transition: width .1s linear; transition: width .1s linear; mix-blend-mode: overlay;
}
.info { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 5; position: absolute; height: 1em; width: 100%; top: 0; bottom: 0; margin: auto; font-size: 5em; letter-spacing: -.08em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: white; mix-blend-mode: difference;
}
Custom Soundcloud Player - Script Codes JS Codes
$(document).ready(function(){ var player = SC.Widget($('iframe.sc-widget')[0]); var pOffset = $('.player').offset(); var pWidth = $('.player').width(); var scrub; player.bind(SC.Widget.Events.READY, function() { setInfo(); player.play(); }); //Set info on load player.bind(SC.Widget.Events.PLAY_PROGRESS, function(e) { if( e.relativePosition < 0.003 ) { setInfo(); } //Event listener when track is playing $('.position').css('width', ( e.relativePosition*100)+"%"); }); $('.player').mousemove(function(e){ //Get position of mouse for scrubbing scrub = (e.pageX-pOffset.left); }); $(document).on('keydown', function(e){ switch(e.keyCode){ case 32: player.toggle(); break; case 39: player.next(); break; case 37: player.prev(); break; } }); $('.player').click(function(){ //Use the position to seek when clicked $('.position').css('width',scrub+"px"); var seek = player.duration*(scrub/pWidth); //Seeking to the start would be a previous? if ( seek < player.duration * .05 ) { player.prev(); } else if ( seek > player.duration * .99 ) { player.next(); } else { player.seekTo(seek); } }); function setInfo() { player.getCurrentSound(function(song) { // Soundcloud just borked this api endpoint, hence this hack :/ var waveformPng = song.waveform_url .replace('json', 'png') .replace('wis', 'w1'); var artworkUrl = song.artwork_url || ''; console.log(song); $('.waveform').css('background-image', "url('" + waveformPng + "')"); $('.player').css('background-image', "url('" + artworkUrl.replace('-large', '-t500x500') + "')"); var info = song.title; $('.info').html(info); player.current = song; }); player.getDuration(function(value){ player.duration = value; }); player.isPaused(function(bool){ player.getPaused = bool; }); }
});
Developer | Nick Colley |
Username | nickcolley |
Uploaded | November 12, 2022 |
Rating | 4 |
Size | 3,033 Kb |
Views | 20,240 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Music | 4,521 Kb |
Subtle Animation Example | 2,101 Kb |
Erno | 5,311 Kb |
Close animation | 2,207 Kb |
Henry Homesweet Boxmodel | 3,747 Kb |
Chrome Bookmark Bar | 1,707 Kb |
Raincoat PC | 3,164 Kb |
Curl Dropshadow | 1,623 Kb |
Banner hover test | 2,825 Kb |
Centered Text in a Perfect Circle | 2,410 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
BlueBox Fork | Huskynation | 12,675 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
STIKHOI | Denmch | 7,122 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Motion Lines - codevember - 02 - 2016 | Caiocares | 2,744 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!