I am trying to make a music player that works with SoundCloud. So I have buttons like play, next, prev. and I made functions like:
function playIt(){
SC.stream("/tracks/293", function(sound){
sound.play();
});
}
So it plays song when the button is player:
<button onclick="playIt()">Play</button>
But it does not work. Any idea?
Here is the demo
1º - Put the JS files in the head. Use the "External Resources" on JSfiddle.
2º - Put var sound = [...] before the SC.steam.
Is that.
Demo: http://jsfiddle.net/don/zcN7G/3/
According to #lago above, let me deliver a full short code, so you can do your own labs ;-)
<!DOCTYPE html>
<html>
<head>
<script src=http://connect.soundcloud.com/sdk.js></script>
<script>
SC.initialize({client_id:'your client_id goes here'});
function p()
{
SC.stream
(
'/tracks/293',
function(s)
{
s.play()
}
)
}
</script>
</head>
<body>
<button onclick=p()>play</button>
</body>
</html>
API guide here
Related
I have made and alarm page using .play() method. But sometimes audio does not play and sometimes it plays. My code it gets executed but the MP3 audio does not get played.
What could be the problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
if (alrm4 != alrm4a) {
alrm4 = alrm4a;
audio.play();
blinker = 4;
}
}, 1000);
});
</script>
</head>
<body>
<script>
var audio = new Audio('Sound.mp3');
</script>
</body>
</html>
Providing more context would be helpful. Your code refers to two variables (alrm4 and alrm4a) that are not defined in the sample code you provided.
Chances are there was a problem loading the mp3 file or your condition, alrm4 != alrm4a, is not evaluating to true. Please edit your question to include the code which defines and manipulates these variables.
I'm trying to play multi-drm content (Widewine, Playready) by using dash.js player (version 2.3.0). I gathered as much information as possible, however I'm still not able to play the content. Dash.js player was modified recently and many code examples found on the internet are no longer valid, also the documentation is not updated. This is my current code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="dash.all.debug.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Dash Example App</title>
</head>
<body onload="testVideo()">
<button id="playButton" type="button">Play</button>
<div>
<video id="vid2" data-dashjs-player controls>
</video>
</div>
<script src="main.js"></script>
</body>
</html>
JS:
function testVideo() {
var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
var AXINOM_DEMO_header = "X-AxDRM-Message";
var AXINOM_DEMO_key = "here is the key";
var player = new dashjs.MediaPlayer().create();
var element = document.querySelector("#vid2");
player.attachProtectionData({
"com.widevine.alpha": new dashjs.MediaPlayer.vo.protection.ProtectionData(AXINOM_DEMO_WV_LS, AXINOM_DEMO_header, AXINOM_DEMO_key)
});
document.getElementById("playButton").click(function() {
var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
player.initialize(element, videoUrl, true);
});
};
As a result, I'm getting "Uncaught TypeError: Cannot read property 'protection' of undefined" in the console. I've prepared the protectionData part according to the documentation linked below.
http://vm2.dashif.org/dash.js/docs/jsdocs/MediaPlayer.vo.protection.ProtectionData.html
Is anyone able to provide me with a working example how multi-drm content should be handled in dash.js or explain what should I change in my code?
Thanks in advance.
There is a DRM quick start example on GitHub that uses this exact content with the Axinom DRM license server, mirroring your scenario quite perfectly.
You can also find a live deployment of the example project that you can view in your browser, to quickly see the user viewpoint.
If something remains unclear after reading that guide, please edit your question and I will edit this answer to expand on the missing parts in detail!
The documentation you linked to is for version 1.5.1.
The documentation for v2.3.0 can be found at http://cdn.dashjs.org/v2.3.0/jsdoc/index.html
Updated JS
function testVideo() {
var AXINOM_DEMO_WV_LS = "http://drm-widevinelicensing.axtest.net/AcquireLicense";
var AXINOM_DEMO_key = "here is the key";
var player = new dashjs.MediaPlayer().create();
var element = document.querySelector("#vid2");
player.setProtectionData({
"com.widevine.alpha": {
"serverURL": AXINOM_DEMO_WV_LS,
"httpRequestHeaders": {
"X-AxDRM-Message": AXINOM_DEMO_key
};
};
});
document.getElementById("playButton").click(function() {
var videoUrl = 'http://media.axprod.net/TestVectors/v6-MultiDRM-MultiKey/Manifest_1080p.mpd';
player.initialize(element, videoUrl, true);
});
};
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>
Fairly new to REST and web application and would like to create a front-end site with a button and a place where a result is displayed.
I have REST API structured like this:
http://hostserver.com/MEApp/MEService
This returns a value when browsing to it.
Now I would like to implement a GUI so that when you browse to c:\resourcebutton.html
There will be a button and when I click on it, it will call the REST API resource and returns the result. If I understood REST correctly it should work like this.
I have a html code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
How and where should I insert the GET method to call the API? Is it common to use Javascript?
Yes, you have to do this with JavaScript. In fact, you need Ajax.
To simplify things, you should download and include JQuery to your site, and then use something like this:
$.post( "http://hostserver.com/MEApp/MEService", function( data ) {
document.getElementById("demo").innerHTML = data;
//Or, in the JQuery-way:
$('#demo').html(data);
});
The jQuery Source can be found here: http://code.jquery.com/jquery-2.1.1.js
Your html-file would then look like this:
<!DOCTYPE html>
<html>
<head>
<script src="the/Path/To/The/Downloaded/JQuery.js"></script>
<script>
//Usually, you put script-tags into the head
function myFunction() {
//This performs a POST-Request.
//Use "$.get();" in order to perform a GET-Request (you have to take a look in the rest-API-documentation, if you're unsure what you need)
//The Browser downloads the webpage from the given url, and returns the data.
$.post( "http://hostserver.com/MEApp/MEService", function( data ) {
//As soon as the browser finished downloading, this function is called.
$('#demo').html(data);
});
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I've just started learning javascript and as my first attempt I'd like to create custom audio player which uses soundcloud's api as a source for music.
So far this is what I got set up:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
window.onload = function() {
SC.initialize({
client_id: '10e27db0dacd00954d7160b4c092a6e2' //Demo ID
});
SC.stream("/tracks/75868018", function(sound){
$("audio-test").attr("src", sound.uri);
});
};
</script>
</head>
<body>
<audio id="audio-test" controls></audio>
</body>
</html>
Ok, got it figured out. The problem was the .stream() - it's meant to deliver a prepackaged player, deployed by the .play() function.
If you use SC.get() instead, you'll actually access the properties of the track, and be able to embed it in an audio tag. See my code: http://jsfiddle.net/LpzpK/6/
There's still a problem - the tracks are marked as 401 forbidden, so the player is only ever "Loading". You'll have to find a way to make the tracks you want to play public.
At a cursory glance, it looks like all soundcloud API objects come with a URI property that links directly to the resource. In your case, it would be sound.uri.
At the top of your player code, you have an <audio> tag - my guess is you'll want to set it's src to the URI value for the track you're playing. You can do this by attaching an ID to it and calling
SC.stream("/tracks/293", function(sound){
$("[audio_id]").attr("src", sound.uri);
});
replacing [audio_id] with whatever ID you choose for the tag. You'll probably still have to do something to reinitialize/restart the player each time it changes, but that will hopefully get you started. Let me know how it works!