Unlock the Secrets of Soundcloud: Practical Steps to Implementing the Soundcloud API in Real Life

I attempted to publish the exact .html and .js codes on the internet and host them on my own server.

I am aiming to duplicate this particular example:

You can check out my code at www[dot]whatsgucci[dot]com/cloudstalk.html

Here is the code I utilized:

HTML:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
        <script src="http://connect.soundcloud.com/sdk.js"></script>
        <script src="stalkscript.js"></script>
    </head>
    <body>
        <ul id="results">

        </ul>
    </body>
</html>

CSS:

#results {
    color: #000000;
    font-weight: bold;
    font-family: cursive;
}

JS:

SC.initialize({
  client_id: '5e3fe3759c70fe637cb15bab22e238e0'
});

$(document).ready(function() {
  SC.get('/tracks', { genres: 'festival trap' }, function(tracks) {
    $(tracks).each(function(index, track) {
      $('#results').append($('<li></li>').html(track.title + ' - ' + track.genre));
    });
  });
});

However, I am not seeing any results being displayed.

Answer №1

Can you specify the exact location where you inserted

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

Your current example is not functioning correctly without the addition of jquery. Make sure to include jquery before importing the soundcloud sdk, as shown below:

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <link type="text/css" rel="stylesheet" href="stalkstyle.css"/>
        <script src="http://connect.soundcloud.com/sdk.js"></script>
        <script src="stalkscript.js"></script>
    </head>
    <body>
        <ul id="results">

        </ul>
    </body>
</html>

You can view the functional example at:

Answer №2

Ensure you have the Jquery library integrated into your code.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experience the magic of playing HTML5 video within the sleek confines of an iPhone image

After coming across a similar inquiry on Stack Overflow (), I decided to create my own solution since the original answer lacked code details. The task at hand is to embed an HTML5 video within an iPhone image frame, like so: The image dimensions are 300 ...

Add numerous submit buttons within a form. Upon clicking on a button, the form should be submitted to a specific URL using AJAX

I have a form with two submit buttons: one labeled as "SUBMIT" and the other as "SCHEDULE NEXT ROUND". When a user clicks on the "SUBMIT" button, the form values should be stored in the database and redirect to the view page. If they click on the "SCHEDULE ...

JQuery AJAX click event not triggering

I'm currently working on a project to create a dynamic website where users can update text fields directly from the site. However, I've encountered an issue on the 'admin' page where nothing happens when the button is pressed to set the ...

When calling an API endpoint, nodeJS is unable to access the local path

I've encountered a strange issue with my code. When I run it as a standalone file, everything works perfectly fine. However, when I try to utilize it in my API endpoint and make a request using Postman, it doesn't seem to function properly. What ...

Issues with Toggling Visibility in HTML, CSS, and Javascript

Currently, I am working on a website and following a tutorial called "Creating Slideshow using HTML, CSS, and Javascript" by W3Schools. In the project, I want to hide the thumbnail images located at the bottom and the navigation arrows initially and have t ...

Rotating an object around another object in a 3D matrix axis using Three.js

I currently have the ability to rotate one axis. Here is the code that's working now: https://codepen.io/itzkinnu/full/erwKzY Is there a way to rotate an object on a random axis instead of just one fixed axis? Maybe something similar to this exam ...

Choosing an item from a dropdown menu in C# using Selenium in web assembly is proving to be ineffective

I am currently working on some automated tests using Selenium Web driver. I have been able to write a script that can locate the class, but I am facing difficulties in selecting one of the items from the drop down menu. Here is the script I have so far: ...

Tips for accessing child elements within an Angular component

I'm struggling to get a reference of child elements within a component. I have experimented with ElementRef, TemplateRef, QueryList, ViewChild, ViewChildren, ContentChild, and ContentChildren without success. <app-modal> <section #referenc ...

How can I write this to function on click events?

Could someone please help me with a simple question I have? I am struggling to properly write the code. $wish_1='<span onclick=alert("Register or Login Now");></span>'; The issue is that spaces are not working and using ' also ...

Calling components may result in a race condition

I have integrated 2 components into my "App" that work together seamlessly. The first component is responsible for resolving the external IP address to a geographical location by making 2 axios.get calls and then passing them back to App.vue using emit. F ...

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning ...

Utilize JavaScript to parse and retrieve specific data from an SVG file in XML format

I am attempting to retrieve an svg file using jquery or javascript. Here is an example of the svg code: <svg width="111" height="123" xmlns="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> <rect fill="#ffffff" strok ...

What could be causing the HelloWorld program in AngularJS to malfunction?

To access the codes, you can visit http://jsfiddle.net/hh1mye5b/1/ Alternatively, you can refer to: <!doctype html> <html ng-app="dcApp"> <head> </head> <body> <div> <div ng-controller="SpeciesController"> ...

Unusual compilation issue encountered in Vue when trying to use a template for a slot

I encountered a strange issue where my Vue compiler was refusing to render the default named slot of a child component. Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first. Even my VSCode highlighted this problem a ...

Removing redundant names from an array using Typescript

My task involves retrieving a list of names from an API, but there are many duplicates that need to be filtered out. However, when I attempt to execute the removeDuplicateNames function, it simply returns an empty array. const axios = require('axios&a ...

Differences in font sizes across various browsers on Mac devices

In the given scenario, a navigation bar is displayed. The elements of this navigation bar have varying widths, but when combined together, their total width matches that of their container element, which is the ul. The problem arises when viewing the navig ...

An error occurred: TypeError - Unable to access the 'value' property of a null object during a value change

Example ImageCreating a dynamic form where rows and select box options are added dynamically using 'x' and 'i' increment values in two JavaScript functions. The code works fine when the option selected is 0.5, but throws an error Uncaug ...

What is the best way to arrange an array in either javascript or typescript based on a specific key, and in the case of identical keys,

Below is an array with objects that need to be sorted: [ { "Books": [], "_id": "5dea9a11a8e1bf301c462ce4", "FileName": "AAAAA", "Order": 99999 }, { "_id": "5dea9864a8e1bf301c462cdb", "Books": [], "FileName": "some1", ...

What is the best way to dynamically populate a table with JSON data that is received from an API response?

Currently, I have a table that contains the FORM element: <table id="example" class="sortable"> <caption><h3><strong>Product inventory list</strong></h3></caption> <thead> <tr ...

Ways to ensure ngModel is accessible across components

I've hit a wall and I'm starting to lose my mind. I've tried all the different methods like FormsModules, ReactiveForms, FORMDIRECTIVES, Input, Output, but I just can't seem to figure out how to make ngModel work between components. My ...