why doesn't Chrome stream a song using SoundCloud API V3 - javascript

I am trying to stream a song using SoundCloud api, but apprantly it does not play it in Chrome. However it works on other browsers.
SC.initialize({
client_id: '65243ec784b284f1d8a8f950312240fa',
redirect_uri: 'http://example.com/callback'
});
SC.stream('/tracks/293').then(function(player) {
player.play();
});
JSFIDDLE
Any idea to make it working in Chrome?

see my solution on the open Github issue (code pasted below for convenience).
If you use SoundManager2, then call setup when the dom is ready.
Rather than using the stream function of the SoundCloud api, call SC.get and then create a soundobject in SoundManager using createSound(), passing in the stream_url from the track that you just grabbed.
SC.get('/users/711016/tracks').then(function(tracks) {
var sound = soundManager.createSound({
id: 'mySound',
url: tracks[0].stream_url + "?client_id=YOUR_CLIENT_ID",
stream: true
});
sound.play();
});
I imagine the api route to the track(s) you are trying to play may be different than mine.

This is a known compatibility issue due to Chrome's version of Flash. There is little you can do besides disable Flash or play with the different versions of the SDK to see which one works for your specific build of Chrome.

As JAL said, this is unfortunately known and there doesn't seem to be a fix out there.
Instead what I would suggest doing is using their widget API to create a custom iFrame (you can make it invisible if you want), and then use the .load() method to load whichever track, or tracks you want. You can read about that here.
The widget API is really nice because it comes with a bunch of event listeners that are very helpful, depending on what you're doing.

Related

Manipulating Embedded Kaltura Player from Javascript

I have a web application and I have embedded a video player. It turns out that the video player is Kaltura. I was able to successfully make it autoplay due to the flashvars property. However, I want it to auto-fullscreen when it starts to play.
With this requirement, I searched and found that Kaltura has a Javascript API. I also found certain codes that will help me in this requirement.
kWidget.addReadyCallback(function( playerId ){
var kdp = document.getElementById(playerId);
kdp.kBind("doPlay", function(){
kdp.sendNotification('openFullScreen');
});
kdp.kBind("doPause", function(){
kdp.sendNotification('closeFullScreen');
});
kdp.kBind("openFullScreen", function(){
$("#fslog").append("openFullScreen\n");
});
kdp.kBind("closeFullScreen", function(){
$("#fslog").append("closeFullScreen\n");
});
});
When I read the documentation regarding the API, it has a kWidget which is apparently part of the API. However, I cannot find this API or the js file for this.
Furthermore, I am not using just the player, I just have an embedded Kaltura player from an internal company site.
The src is: https://internalsite.company.com/embed/secure/iframe/entryId/videoid/uiConfId/integers?(string of flashvars)
Now, I cannot understand how am I suppose to integrate this if I can't find the relevant js files for the Kaltura player. If someone can help me just to start out on integrating Kaltura (like a simple code or a link to the tutorial) it would really help.
If you must embed via an iframe with src set to https://internalsite.company.com/embed/secure/iframe/..., then you probably won't be able to access player's JS API. This is a MediaSpace endpoint for internal embeds (protected via SSO).
You can try requesting a different player uiConfId ID from the company that provided you with this endpoint, that will have the full screen support build in.

WebRTC: use of getStats()

I'm trying to get stats of a webRTC app to measure audio/video streaming bandwidth.
I checked this question and I found it very useful; however, when I try to use it I get
TypeError: Not enough arguments to RTCPeerConnection.getStats.
I think that is because of in 2016 something in webRTC is changed and now there are mediaStreamTracks; however I built the project without mediaStreamTracks and I don't know how to change this function to get it to work.
Do you have any ideas?
Thanks for your support!
UPDATE:
My call is
peer.pc.onaddstream = function(event) {
peer.remoteVideoEl.setAttribute("id", event.stream.id);
attachMediaStream(peer.remoteVideoEl, event.stream);
remoteVideosContainer.appendChild(peer.remoteVideoEl);
getStats(peer.pc);
};
and getStats() is identical to this link at chapter n.7.
been sometime since I used WebRTC, problem then was, chrome and firefox implemented it differently( believe they still do it differently)
Firefox:
webrtc stats tab is about:webrtc
peerConnection.getStats(null).then(function(stats){... // returns a promise
Chrome:
webrtc stats tab is chrome://webrtc-internals/
peerConnection.getStats(function(stats){ // pass a callback function
one way to circumvent these cross browser issues is using adapter.js

JavaScript: Simple SoundCloud API example for Streaming won't work properly with Safari

I'm quite frustrated with a simple soundcloud api streaming example I'm working on for couple of days know. It basically just chooses randomly a SC-url and prints out a volume information. I'm using the audiostreamsource.js library by Gregg Tavares for creating the audiocontext and the p5.js for creating a paragraph.
That's it...
It works perfectly fine on Fireforx/Chrome. But for some reason it only works in Safari when I refresh the page. Sometime it even crashes with Safari. :( I think I'm just not experienced enough to get behind that problem. I really tried to solve it from every possible angle. Now I'm stuck.... :(
You can see my little example here: http://christianlosert.com/test/01/
EDIT: To see the problem you have to past the link above into a new browser tab. Then you'll see that after a couple of milliseconds the streaming aborts in Safari.
Can anybody see my mistake?
PS: With the help of Gregg Tavares I tried to create an streaming example without the audiostreamsource.js/p5.js library to make sure the bug is on my side of the code. Curiously this example works ONLY with Safari (not Firefox/Chrome): http://christianlosert.com/test/greg/
I really have absolutely no clue what's going on here
The soundcloud 3.0 library does not work with Safari. See
soundcloud's 2.0 sdk works but 3.0 does not as of Oct 29th, 2015
You can either
use the soundcloud 2.0 library (problem: it initializes flash even if it doesn't use it)
Just make the soundcloud API request on your own using some XHR code
Basically you make an XHR request to
https://api.soundcloud.com/resolve?url=<musicUrl>&client_id=<yourclientid>&format=json&_status_code[302]=200
note: you need to call encodeURIComponent on <musicUrl> and possibly on _staus_code[302]
If the result has a status of 302 then follow the location
var result = JSON.parse(resultString);
if (result.status.substr(0, 3) === "302" && result.location) {
do XHR on result.location
else
use result as normal

Playing audio in Android Cordova Project without using the media plugin

I have two questions regarding the audio play on android device while using the cordova.
1. Can I play the audio in android cordova project without using the cordova media plugin using this code ?
var audio = new Audio('swoosh.mp3');
audio.play();
I'm getting this eroor : E/MediaPlayer﹕ Error (1,-2147483648) when trying to do this
I have used Cordova media plugin and it works only once in a page when calling the audio function on onload
function playmusic()
{
var url1 = "/android_asset/www/swoosh.mp3";
var fall_media = new Media(url1,
// success callback
function () { console.log("playAudio():Audio Success"); },
// error callback
);
fall_media.play();
}
<body onload="playmusic();"></body>
Why this happens?
Any help will be appreciated.
You can, but you are going to be writing a lot of custom code to do what is already provided for you. Especially if you are using other platforms besides Android. You also will increase the size of your application because you will have to provide each different format for each different device.
Yes that would be correct. The only time you are running this function is onload. If you are looking to use a button for this you could create an event for a particular button and play it that way. Take a look at the documentation and you'll see a full featured example. Sorry, I tried to paste the relevant parts here, but for some reason it was stripping code out.

YouTube Player API: retrieving a reference to an existing player

I'm developping a Google Chrome extension, using content script. I want to interact with pages embedding a YouTube video player. I have include the www-widgetapi-vfljlXsRD.js as a JavaScript file, and YouTube namespace is correctly initialize inside the extension sandbox.
I'm trying to retrieve a reference to an existing iFrame player. To achieve that, I tried this:
var ytplayer = new YT.Player('ytplayer');
ytplayer.pauseVideo();
where div#ytplayeris the iFrame embedding the actual player.
I'm getting this error, telling that the method does not exist:
TypeError: Object # has no method 'pauseVideo'
What is the correct way to retrieve a reference to an existing player?
I was using YouTube player API before and it was working properly. Today I have issues like you, and I did not change anything in my code. It might mean that the www-widgetapi-vfljlXsRD.js has been changed and encounters bugs... I cannot help any further.
Ok, I found my way to talk to an existing player. I have not actually managed to get a working reference to it.
I was inspired by the amazing work of Rob (cf. YouTube iframe API: how do I control a iframe player that's already in the HTML?), I remarked that the Youtube player is sending message to the main window, like this:
{"event":"infoDelivery","info":{"currentTime":3.3950459957122803,"videoBytesLoaded":244,"videoLoadedFraction":0.24482703466872344},"id":1}
You can observe it by listening to the "message" event window.addEventListener('message', function (event) {console.log(event.data)}, false); in a window containing a playing player.
This infoDelivery event contains the current player's time and is sent while the video is playing. Listening to this event I am now able to know the current player time.
I have not found a proper solution so far so this one will make the job for the moment.

Categories