wavesurfer.js ne fonctione pas sur Safari

lakamark
Javascript

Bonjour
Je suis entraine de développer un site de musique. J'utilise le plugin
http://www.wavesurfer.fm/ et l'api de Soundcloud pour récupéré mes fichiers mp3 de mes tunes.

Mon script fonctione très bien. Quand je testes mon script sur Safari plus rien ne fonctione. Dans ma console il y a une belle grosse erreur de ce type qui s'affiche :

Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: Cannot make any requests from null.
nnot make any requests from null.

Voici mon script :

function spotlightplayer(obj_config,playing_param) {
    var apiUrl = 'https://api.soundcloud.com/tracks/123/stream?client_id=XXXXXX&secret_token=' + obj_config.abecd;
    wavesurfer.on('ready', function () {
        jQuery('#spotlightplayer__play').hide();
        jQuery('#spotlightplayer__pause').show();
        wavesurfer.play();
    });
    wavesurfer.on('finish',function(){
        jQuery('#spotlightplayer__play').show();
        jQuery('#spotlightplayer__pause').hide();
        wavesurfer.play();
    });
    wavesurfer.load(apiUrl);
}

Le plugin utilise le webaudio qui disponible pour presque tout les naviagteur :
http://caniuse.com/#feat=audio-api

Je ne comprend pas pour l'api de Soundcloud me bloque.

Merci de votre aide.

21 réponses

Huggy

Ne dois-tu pas instancier ton objet avant de l'utiliser ?

var wavesurfer = Object.create(WaveSurfer);
lakamark
Auteur

var wavesurfer = Object.create(WaveSurfer);

je les fait en début de script.

Le problème est de là :
wavesurfer.load(stream.url);

antho07

Bonjour,

Est-il possible de voir le problème en ligne quelque part?
Le problème se produit-il sur safari sur windows également ?

Dans le cas contraire, n'ayant pas de mac, serait-il envisageable d'analyser le problème via un partage d'écran ?

Huggy

Le message est clair, le serveur répond 404 not found
essaye avec une autre url.
Comme c'est de l'https, c'est peut être un pb de certificat lié à Safari

Huggy

En cherchant un peu, il semble que ce soit un pb d'ajax cross domain bloqué par Safari
Safari implémente mal le protocole CORS qui permet de faire un appel cross domain
Peut être lié à une version trop vieille de Safari
voir lien http://stackoverflow.com/questions/25820372/soundcloud-resolve-in-safari

lakamark
Auteur 
function spotlightplayer(obj_config,playing_param) {
      var apiUrl = 'https://api.soundcloud.com/tracks/' + obj_config.track_id + '/stream?client_id=' + streamClient_id +'&secret_token=' +              obj_config.abecd;
      wavesurfer.on('ready', function () {
          jQuery('#spotlightplayer__play').hide();
          jQuery('#spotlightplayer__pause').show();
          wavesurfer.play();
      });
    wavesurfer.on('finish',function(){
        jQuery('#spotlightplayer__play').show();
        jQuery('#spotlightplayer__pause').hide();
        wavesurfer.play();
    });
    wavesurfer.load(apiUrl);
}

Voici les erreurs que Safari me donne : http://prntscr.com/6cevqb

C'est juste sur Safari que ça afficher les erreur.

lakamark
Auteur

Huggy,
J'utilise la version 8.03 de safari.

lakamark
Auteur

A oui sur google chrome j'ai des foit cette erreur :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

antho07

Bonjour c'est un problème de cross domain

Tu ne peux pas procéder en ajax. Et d'ailleurs mettre ça en js ==> https://api.soundcloud.com/tracks/' + obj_config.track_id + '/stream?client_id=' + streamClient_id +'&secret_token=' + obj_config.abecd;

rend le secret_ token accessible à toutes les personnes qui iront sur ta page...

Tu peux changer ton implémentation en appelant l'api depuis ton serveur (attention à la partie https... ) et appeler ton serveur en ajax depuis le navigateur.

En gros :

lakamark
Auteur

comment je peut passer mon scropt a mon serveur et qui envoit la requete a soundcloud. ok je siis dans une impasse. Avec une fonction php qui s'occupe de la connection entre serveur et api

antho07

En effet , après relecture je n'avais pas évaluer l'ensemble du problème...

J'ai peut être une idée mais avant toute chose :

  • wavesurfer n'attends pas la fin du téléchargement de la musique pour débuter l'écoute?

  • Es-tu root sur ton serveur?

lakamark
Auteur

Qu'est ce que tu veux dire par root sur mon serveur.

lakamark
Auteur

J'ai une idée Je pourrais faire une fonction php qui s'occupe de l'échange entre mon serveur et l'api soundcloud et qu"en ajax j'appelle cette fonction. Une foit que j'ai le ok de l'api soundcloud je charge mon objet wavesurfer.

antho07

Si tu es root sur ta machine cible (serveur dédié, vps) , j'opterais pour la mise en place d'un proxy

lakamark
Auteur

J'utilise une machine vagrant pour mes teste et mon serveur en production est multiliser

antho07

Je ne sais pas si tu pourras mettre en place un proxy dessus....

La solution de rapatrier le fichier soundcloud sur le serveur pour ensuite le renvoyer côte js existe mais met clairement en risque les performances..

lakamark
Auteur

Avec du php je passe le secret token sans que soit être afficher sur la page.

antho07

J'ai pas compris...

lakamark
Auteur

Je ne vois pas d'autre solution.

antho07

A mettre en place et tester la montée en charge pour voir si la solution est satisfaisante.

lakamark
Auteur

Tu parle de cette solution :
La solution de rapatrier le fichier soundcloud sur le serveur pour ensuite le renvoyer côte js existe mais met clairement en risque les performances..

Je ne comprend pas de ce que tu veux dire par rapatrier le fichier.