SoundCloud Music Visualizer

Developer
Johan Karlsson
Size
4,211 Kb
Views
91,080
  1. SoundCloud Music Visualizer Previews
  2. SoundCloud Music Visualizer HTML Codes
  3. SoundCloud Music Visualizer CSS Codes
  4. SoundCloud Music Visualizer JS Codes

How do I make an soundcloud music visualizer?

Press Play!Sound visualization with Web Audio API.No external libraries used.SoundCloud integration done with xhr (XMLHttpRequest) calling a REST API.. What is a soundcloud music visualizer? How do you make a soundcloud music visualizer? This script and codes were developed by Johan Karlsson on 26 July 2022, Tuesday.

SoundCloud Music Visualizer Previews
IQ Test

SoundCloud Music Visualizer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SoundCloud Music Visualizer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="http://soundcloud.com" class="float"> <img src="https://developers.soundcloud.com/assets/powered_by_black-4339b4c3c9cf88da9bfb15a16c4f6914.png" />
</a>
<canvas id="theCanvas" width="1024" height="256" title="Press Play!"></canvas>
<div class="flex-container"> <div> <button id="oscilloscopeButton" type="button" class="btn btn-default">Oscilloscope</button> <button id="frequencyBarsButton" type="button" class="btn btn-default">Frequency bars</button> </div> <div> <button id="playButton" type="button" class="btn btn-primary"><h1>&#9658; Play Track!</h1></button> </div> <div> <span id="currentTime">00:00:00</span> <input id="slider" type="range" value="0"/> <span id="totalTime">00:00:00</span> </div> <div> <input id="trackUrlSearch" type="url" placeholder="URL of SoundCloud track" /> <button id="findButton" class="btn btn-default">Find</button> </div> <div> <label>Artist: <a id="artistUrl"> <span id="artistName"></span><br/> <img id="artistAvatar" /> </a> </label> </div> <div> <label>Track: <a id="trackUrl"> <span id="trackName"></span><br/> <img id="trackArt" /> </a> </label> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

SoundCloud Music Visualizer - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Jaldi);
html, * { font-family: 'Jaldi', sans-serif;
}
.float { position: absolute;
}
.flex-container { display: inline-flex; flex-direction: column; flex-wrap: wrap; height: calc(100vh - 320px);
}
div { margin: 10px;
}

SoundCloud Music Visualizer - Script Codes JS Codes

/* Johan Karlsson (DonKarlssonSan) Read my blog post about Web Audio API: http://codepen.io/DonKarlssonSan/blog/fun-with-web-audio-api
*/
(function() { var AudioContext; var audio; var audioContext; var source; var analyser; var canvas = document.getElementById("theCanvas"); var canvasContext = canvas.getContext("2d"); var dataArray; var analyserMethod = "getByteTimeDomainData"; var slider = document.getElementById("slider"); var streamUrl; var isIdle = true; var canvasWidth = canvas.width; var canvasHeight = canvas.height; function initAudio(streamUrl) { AudioContext = window.AudioContext || window.webkitAudioContext; audio = new Audio(); audio.crossOrigin = "anonymous"; audioContext = new AudioContext(); source = audioContext.createMediaElementSource(audio); source.connect(audioContext.destination); analyser = audioContext.createAnalyser(); source.connect(analyser); }; function get(url, callback) { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState === 4 && request.status === 200) { callback(request.responseText); } } request.open("GET", url, true); request.send(null); } var clientParameter = "client_id=3b2585ef4a5eff04935abe84aad5f3f3" // Basing everything on the track's permalink URL. That is what the user knows. // Makes it possible to use the text box for pasting any track URL. // The Outsider is a friend of mine. // The majority of his tracks are on Mixcloud: // https://www.mixcloud.com/outsider_music/ var trackPermalinkUrl = "https://soundcloud.com/the-outsider/the-outsider-death-by-melody"; function findTrack() { get("https://api.soundcloud.com/resolve.json?url=" + trackPermalinkUrl + "&" + clientParameter, function (response) { var trackInfo = JSON.parse(response); slider.max = trackInfo.duration / 1000; document.getElementById("totalTime").innerHTML = millisecondsToHuman(trackInfo.duration); document.getElementById("artistUrl").href = trackInfo.user.permalink_url; document.getElementById("artistAvatar").src = trackInfo.user.avatar_url; document.getElementById("artistName").innerHTML = trackInfo.user.username; document.getElementById("trackUrl").href = trackInfo.permalink_url; if(trackInfo.artwork_url) { document.getElementById("trackArt").src = trackInfo.artwork_url; } else { document.getElementById("trackArt").src = ""; } document.getElementById("trackName").innerHTML = trackInfo.title; streamUrl = trackInfo.stream_url + "?" + clientParameter; } ); }; function startIdleAnimation() { // Makes the sine wave height increase and decrease var amplitude = 100; // Makes the sine wave move to the left var phase = 0; var isIncreasing = false; function drawIdleAnimation() { canvasContext.clearRect(0, 0, canvasWidth, canvasHeight); if(isIdle) { requestAnimationFrame(drawIdleAnimation); } canvasContext.beginPath(); for(var x = 0; x < canvasWidth; x++){ canvasContext.lineTo(x, Math.sin((x+phase)/50)*amplitude + 120); } canvasContext.stroke(); phase++; if(amplitude > 100) { isIncreasing = false; } else if(amplitude < 1) { isIncreasing = true; } if(isIncreasing) { amplitude++; } else { amplitude--; } } drawIdleAnimation(); } function startDrawing() { // Stop drawing idle animation isIdle = false; analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; console.log(bufferLength); dataArray = new Uint8Array(bufferLength); canvasContext.lineWidth = 1; canvasContext.strokeStyle = 'rgba(0, 0, 0, 1)'; function drawAgain() { canvasContext.clearRect(0, 0, canvasWidth, canvasHeight); requestAnimationFrame(drawAgain); analyser[analyserMethod](dataArray); for(var i = 0; i < bufferLength; i++){ canvasContext.beginPath(); canvasContext.moveTo(i, 255); canvasContext.lineTo(i, 255 - dataArray[i]); canvasContext.closePath(); canvasContext.stroke(); } } drawAgain(); } function startButton_Clicked() { audio.src = streamUrl; audio.play(); slider.value = 0; // Using four seconds so the user can change the value of // the slider. Too short interval will cause the automatic // updating to steal the control from the user. setInterval(function () { slider.value = audio.currentTime; }, 4000); var currentTime = document.getElementById("currentTime"); setInterval(function () { currentTime.innerHTML = millisecondsToHuman(audio.currentTime * 1000); }, 1000); startDrawing(); } function jumpTo(here) { if (!audio.readyState) return false; audio.currentTime = here; //} //audio.fastSeek(here); }; slider.addEventListener("change", function () { jumpTo(this.value); }); function millisecondsToHuman(milliseconds) { var date = new Date(null); date.setMilliseconds(milliseconds); return date.toISOString().substr(11, 8); }; document.getElementById("playButton").addEventListener("click", startButton_Clicked); document.getElementById("oscilloscopeButton").addEventListener("click", function(){ analyserMethod = "getByteTimeDomainData"; startDrawing(); }); document.getElementById("frequencyBarsButton").addEventListener("click", function(){ analyserMethod = "getByteFrequencyData"; startDrawing(); }); document.getElementById("findButton").addEventListener("click", function(){ trackPermalinkUrl = document.getElementById("trackUrlSearch").value; findTrack(); }); startIdleAnimation(); findTrack(); initAudio();
})();
SoundCloud Music Visualizer - Script Codes
SoundCloud Music Visualizer - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded July 26, 2022
Rating 4.5
Size 4,211 Kb
Views 91,080
Do you need developer help for SoundCloud Music Visualizer?

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!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
Text by Brownian Motion
Lissajous x Lissajous
Particle Text
Laser Writer
Wayward Walker Worms
Rotating Neon Curves
Photobooth - Webcam with realtime CSS filters.
Phone Case Pattern Animation
Random Fractal
Diffusion-Limited Aggregation - Line
Create amazing love letters with AI!

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!