simple play sound from soundcloud by clicking button - javascript

Trying to stream sound on page from soundcloud, as it said on API, but unfortunately there's no sound when I'm click on button.
Otherwise, when I "run" this code here or on jsfiddle - it works!
It must be problem that I'm trying to run it from local disc?
How can I solve it?
SC.initialize({
client_id: '53902af7a344bb0351898c47bc3d786f'
});
$("#stream").on("click", function(){
SC.stream("/tracks/49712607", function(sound){
sound.play();
});
});
<!DOCTYPE html>
<html>
<head>
<title>music</title>
<meta charset="windows-1251">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk-2.0.0.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id='player'>player
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</div>
</body>
</html>

You need to execute your call to the SDK while your files are hosted on a web server. But you can have the web server running form your local machine.
The problem is trying to run things from the filesystem. When doing so, you get the error:
NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
To ensure you do have this error, please try the basic example from SoundCloud.
See also this question.
What technology to choose then depends on what you feel comfortable with...
For instance I do most of my local apps with Node.JS. Maybe the simplest way would be to use http-server as noted in your comment.
Launch it on the command line with: http-server <your-directory> -o. With -o your default browser will open and list the files in your-directory.
Notice that the SoundCloud docs are using the JQuery .live() function call but it is deprecated! That made their code work despite the DOM not being ready yet.
Here, you want to use the regular .on() function and have the binding of the click event handler done once the DOM is ready. For that you use $(document).ready(function() { ... });
Here's the code I used.
<!DOCTYPE html>
<html>
<head>
<title>music</title>
<meta charset="windows-1251">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk-2.0.0.js"></script>
<script>
SC.initialize({
client_id: "53902af7a344bb0351898c47bc3d786f"
});
$(document).ready(function() {
$("#stream").on("click", function(){
SC.stream("/tracks/49712607", function(sound){
sound.play();
});
});
});
</script>
</head>
<body>
<div id='player'>player
<input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" />
</div>
</body>
</html>

Related

Issue in referencing external js file inside html

I am trying to reference external js file inside my html as follow, did I miss something? The pie chart is supposed to appear but I am not getting it.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_src
<script src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Your code has 4 main problems:
You didn't call jQuery inside the HTML document <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>, that must be called before the plugin
You called twice the plugin: both the minified and not minified version (if available, always request for the minified version since it's lighter)
You requested the plugin over HTTP instead the always better HTTPS
You didn't call the function inside the document with $(".pie").peity("pie")
Here's a working snippet.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://benpickles.github.io/peity/jquery.peity.min.js"></script>
</head>
<body>
<div>
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span>
</div>
<script>
$(document).ready(function() {
$(".pie").peity("pie");
});
</script>
</body>
</html>
There are three changes to be made in your code.
You need to include jQuery.
You need to call the peity() function on the span.
You need not include both jquery.peity.js and jquery.peity.min.js. Including either one is sufficient.
See code below.
$(document).ready(function() {
$("span.pie").peity("pie");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://benpickles.github.io/peity/jquery.peity.min.js"></script>
<div><span class="pie">1/5</span></div>
Seems you have missed the JavaScript snippet
1. Loading order Should be changed ,
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="http://benpickles.github.io/peity/jquery.peity.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("span.pie").peity("pie");
});
</script>
</head>
<body>
<div><span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
<span class="pie">1,4</span>
<span class="pie">226,134</span>
<span class="pie">0.52,1.041</span>
<span class="pie">1,2,3,2,2</span></div>
<body>
</html>
In addition to the other answers, your Dojo snippet isn't working because you're trying to load the Peity plugin over HTTP from a page being served over HTTPS. Your web browser console will tell you that the browser blocks loading mixed content from an HTTPS page.
Load peity.js from https://benpickles.github.io/peity/jquery.peity.js. But when you publish your site, download peity.min.js and host it on your own server. Github is not a CDN.

JQuery Failed to Handle Button's On Click Event

I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>
As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer‌​y.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>
I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags

firefox - unable to receive event for dynamic javascript

I have some dynamic javascript that creates elements, with a click event element handler... the script is included from another domain.
However with Firefox at runtime it gives a security warning and does not process the click event (Chrome works fine).
A simplified version below
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<h2 id="headertitle">TEST</h2>
<br/>
<script type="text/javascript" src="somewhereelse.com/script.js">
</script>
</body>
</html>
Javascript include:
document.getElementById("headertitle").insertAdjacentHTML('beforeBegin',
"<button value='TEST' onclick='clickHandler(this)' >Button</button>");
function clickHandler(evt){
alert("clicked");
}
Warning Message:
Security wrapper denied access to property undefined on privileged
Javascript object. Support for exposing privileged objects to
untrusted content via exposedProps is being gradually removed -
use WebIDL bindings or Components.utils.cloneInto instead. Note that
only the first denied property access from a given global object will
be reported.
I tried your code here and it worked fine for me on Firefox 50.1.0. =/
However, I strongly recommend you use JQuery to deal with events triggered by dynamically created elements. JQuery handles the DOM differently, it's cross-browser and it's just made for this kind of situation. It may solve your problem. =D
Try and change your html to
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<h2 id="headertitle">TEST</h2>
<br/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="somewhereelse.com/script.js">
</script>
</body>
</html>
and your JS code to
document.getElementById("headertitle").insertAdjacentHTML('beforeBegin',
'<button value="TEST" class="clickable" id="btn1">Button</button>');
$('.clickable').on('click', function() {
alert($(this).attr('id') + ' was clicked');
});
That should make it work!
Cheers! =)

Check internet connection with offline.js

I am creating phonegap application for android.
I want to check internet connection for application. I am using offline.js.
But it's not working at all for me.
My code is,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>datePickerAngularTPLS</title>
<link href="css/offline.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/offline.js"></script>
</head>
<body>
<script>
$(function () {
function on(evt) {
alert("connected successfully");
}
function off(evt) {
alert("connection failed");
}
Offline.on("up", on);
Offline.on("off", off);
});
</script>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
What is the problem in above code... ?
I just want to show alert on success and lose of internet connection.
I have also tried with navigator.isOnlie, but not reliable.
Please follow offline js LINK
Or other way is :
window.navigator.onLine
This will return true or false.
And one more way is using Phonegap available plugin:
Phonegap Plugin
In your first example you have forgotten to close the $ function. Its likely you would see an error message in the console, and those handlers would never have been created/attached.
If this is just a typo in your question and you are properly closing that function in your real code, then my guess is that you're adding the handlers after the up event has already occurred. Here it explains when these events are triggered.
If you load your page, then toggle your connection on and off do you see the events logged?

Initiating Soundcloud for practice page

I've registered a practice app for soundcloud in order to get a client id. My app doesn't have an official site because I don't want to register a domain. I'm just trying to learn how to use soundcloud using a .html and .js file. I've followed the API tutorials exactly, but nothing happens whenever I try to use soundcloud. I initialized SC using my client ID, and have imported JQuery and everything I need to. Thanks for the help
my html file (practice.html):
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
my .js file (script.js):
SC.initialize({
client_id: 'the client id they gave me...'
});
$(document).ready(function() {
SC.get('/tracks/293', function(track) {
SC.oEmbed(track.permalink_url, document.getElementById('player'));
});
});
Again, nothing happens when I load the page...
Looks like you're missing the full url for the SoundCloud JavaScript SDK (missing http:):
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
You should be able to run this locally within your browser as SoundCloud supports Cross Origin Resource Sharing headers, removing the restriction on XSS: Of CORS We Do

Categories