2015-07-14 53 views
5

Così sto avendo alcuni problemi con il lettore audio soundcloud api e html 5.Cors Html5 Jquery/SoundManager wierdness

L'obiettivo principale è accedere a tutti i brani soundcloud disponibili pubblicamente utilizzando solo html5.

Sto usando quanto segue.

//C# api call returning json object. Cut down version of the code as it isnt the issue. 
    var method "http://api.soundcloud.com/users/{0}/favorites.json" 
    var query = "?client_id=" + soundCloudClientId; 

    WebClient client = new WebClient(); 

    return client.DownloadString(string.Format(method, artistId) + query); 

Sto tornando indietro da Soundcloud. Ridurre ancora per alcuni casi di test rilevanti

{ 
     "Songs": 
     [ 
      { 
       "Title": "Rio", 
       "Artist": "Netsky", 
       "Album": "", 
       "Duration": "03:49", 
       "Artwork": "https://i1.sndcdn.com/artworks-000120037955-m8t78n-t500x500.jpg", 
       "StreamUrl": "https://api.soundcloud.com/tracks/210032350/stream", 
       "Libary": "SoundCloud", 
       "TrackId": "210032350" 
      }, 
      { 
       "Title": "FreqAsia x Nasty Wizard - Episode 01", 
       "Artist": "Frequency Asia", 
       "Album": "", 
       "Duration": "17:50", 
       "Artwork": "https://i1.sndcdn.com/artworks-000120265160-sn1a4k-t500x500.jpg", 
       "StreamUrl": "https://api.soundcloud.com/tracks/210368447/stream", 
       "Libary": "SoundCloud", 
       "TrackId": "210368447" 
      }, 
      { 
       "Title": "Episode 023 - June 2015", 
       "Artist": "Frequency Asia", 
       "Album": "", 
       "Duration": "44:15", 
       "Artwork": "https://i1.sndcdn.com/artworks-000120689935-24wvqo-t500x500.jpg", 
       "StreamUrl": "https://api.soundcloud.com/tracks/210995770/stream", 
       "Libary": "SoundCloud", 
       "TrackId": "210995770" 
      }, 
      { 
       "Title": "Porter Robinson - Flicker", 
       "Artist": "Porter Robinson", 
       "Album": "", 
       "Duration": "04:39", 
       "Artwork": "https://i1.sndcdn.com/artworks-000086441918-ds0915-t500x500.jpg", 
       "StreamUrl": "https://api.soundcloud.com/tracks/160632928/stream", 
       "Libary": "SoundCloud", 
       "TrackId": "160632928" 
      } 
     ] 
    } 

Questo viene chiamato tramite la tecnologia AJAX sulla mia pagina e poi con i risultati che il rendering di un gruppo di HTML nella pagina con attacchi a funzione onclick che assomiglia a questo.

$.ajax({ 
     url: 'http://api.soundcloud.com/tracks/' + 
      widget.get("TrackId") + 
      '/streams?' + 
      'client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' + 
      '&format=json&_status_code_map[302]=200', 
     dataType: 'json', 
     method: "GET", 
     success: function (resp) { 
      $("#myAudio").attr("src", resp.http_mp3_128_url); 
      $("#myAudio")[0].play(); 
     }, 
     error: function (req, status, err) { 
      console.log('something went wrong', status, err); 
     } 
    }); 

Dove $ ("# MyAudio") è pari a

<audio id="myAudio" 
     src="" 
     crossorigin="anonymous" 
     type="audio/mpeg" 
     controls="controls" 
     style="width: 100%"> 
     Your user agent does not support the HTML5 Audio element. Woof.. 
    </audio> 

Ora, questo funziona per circa la metà delle mie canzoni. Funziona con Rio - NetSky - 210032350. Tuttavia per Porter Robinson - Flicker - Non funziona. Vengo buttato il seguente errore:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc2NDV9fX1dfQ__&Signature=JN5bWI9dRW6a-KAczl0tjeTdoKmSa5BS8eGdI3I9E~NX9N~L-E9M2LRuCSuOc0jN0vk53VodFvwtArHfnFpedZjlo-7fmRwKMcZd5LAkGvCww0OiAztuzk4GESmLF8zE8RhKOF5UlNCJNLPZYM2BLgZPuMzsfLeQSLGPDbCHkiJazXZYoPjWKS8x3AYq4IBuwrzHsDOPT3GJN0XU89ugCm8x-cEZX946udYeRNrTwVUsVpTGjXwBE8zxRIE8AZFssptJsb9rCDpq9AlSoVBmII7RqYC264R9eovCqH8OTHGrQaeCQ9sXncwckjLpa70bjouCT-1UV6ampEIs9wTaKQ__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ. (Reason: CORS header 'Access-Control-Allow-Origin' missing). 

Come un capriccio strano se tolgo crossorigin = "anonimo" dalla mia pagina (manualmente in firbug) dopo aver cambiato lo src gioca la canzone (correttamente). Ancora più strano è quello dopo che tutte le canzoni suonano ma senza suono>: S.

La rimozione di crossorigin = "anonymous" dall'inizio non ha alcun effetto.

Tuttavia, se utilizzo l'approccio soundmanager, sembra funzionare correttamente.

SC.stream(
     "/tracks/" + widget.get("TrackId"), 
     { 
      useHTML5Audio: true, 
      multiShotEvents: true 
     }, 
     function (sound) { 
      // This is Pure Evil 
      $("#myAudio").remove(); 
      sound.play(); 
      var newPlayer = $(sound._player._html5Audio); 

      newPlayer.attr('id', "myAudio"); 
      newPlayer.attr('type', "audio/mpeg"); 
      //newPlayer.attr('crossorigin', "anonymous"); 
      newPlayer.attr('controls', "controls"); 
      newPlayer.attr('style', "width: 100%"); 

      $('#AudioPlayerContainer').append(newPlayer); 

      audio = $("#myAudio"); 
      audio[0].play() 
     } 
    ); 

Ora torniamo al nocciolo del problema.

Sia il metodo html5 che il metodo Sound Manager hanno colpito il seguente url con una richiesta get.

https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc3MDl9fX1dfQ__&Signature=w9wbiSg6eYJd6LESarJl4hbTNPwEMa0tV8q1rC30E~b5UcicVw~mkR6RfMaY4pYSE489nNFjXUTTPUYJ-2T6BHnarxBl8YcRsmAsRbp3BzI6AlkutzqV4LOTma0r08WA9CpuMRJRyOnfwA271sQeYz~FkKadkTs1zKTyBbKc~WxAQvqkfwXimYpAynWmGuw7mFc-AEXEQ9wwPDBj6EJD5R1NtvBPia-jtJEdfO39I4BIwGGLeu57xIQk0GcYWhJ2rEspmfDh~Z99dKW0H5tGNC3UyVGG7cb-PKiyVOkIdKRz3paqZ6~Xu65nMC5EVD1dc7T8~sYTLsUVJkNu~aySuw__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ 

HTML5 Request e Response headers

Host: cf-media.sndcdn.com 
    User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0 
    Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5 
    Accept-Language: en-US,en;q=0.5 
    Origin: http://localhost:58434 
    Range: bytes=0- 
    Referer: http://localhost:58434/Home/Main 
    Connection: keep-alive 

    Accept-Ranges: bytes 
    Age: 361541 
    Cache-Control: max-age=252460800 
    Connection: keep-alive 
    Content-Length: 4465057 
    Content-Range: bytes 0-4465056/4465057 
    Content-Type: audio/mpeg 
    Date: Thu, 09 Jul 2015 23:49:29 GMT 
    Etag: "b46b442c81cdb2d253827a19291d2847" 
    Last-Modified: Mon, 28 Jul 2014 11:56:24 GMT 
    Server: AmazonS3 
    Via: 1.1 5c5638d5b5fb0e5b90e36788792360f2.cloudfront.net (CloudFront) 
    X-Amz-Cf-Id: sSqydrdg2dAC7O1q3vUszcSKjd-qPAvtMbwijwwKF_MBZ3m1yHazcA== 
    X-Cache: Hit from cloudfront 
    x-amz-meta-bitrate: 128 
    x-amz-meta-duration: 279091 
    x-amz-meta-job: nwtEnjuJwESE 
    x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H 

Request Manager suono e la risposta intestazioni

Host: cf-media.sndcdn.com 
    User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0 
    Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5 
    Accept-Language: en-US,en;q=0.5 
    Range: bytes=0- 
    Referer: http://localhost:58434/Home/Main 
    Connection: keep-alive 

    Accept-Ranges: bytes 
    Age: 361891 
    Cache-Control: max-age=252460800 
    Connection: keep-alive 
    Content-Length: 4465057 
    Content-Range: bytes 0-4465056/4465057 
    Content-Type: audio/mpeg 
    Date: Thu, 09 Jul 2015 23:49:29 GMT 
    Etag: "b46b442c81cdb2d253827a19291d2847" 
    Last-Modified: Mon, 28 Jul 2014 11:56:24 GMT 
    Server: AmazonS3 
    Via: 1.1 b93cfa23ea94b492bc1948ec35e51f94.cloudfront.net (CloudFront) 
    X-Amz-Cf-Id: 6KjUx89xvaKdOIvl-7IcrnNhhhnCVr2Fk_1Co-S4vt4KdytC6GfJDg== 
    X-Cache: Hit from cloudfront 
    x-amz-meta-bitrate: 128 
    x-amz-meta-duration: 279091 
    x-amz-meta-job: nwtEnjuJwESE 
    x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H 

Nota che Origine: esiste nella prima richiesta e non il secondo. Ora ho provato a giocherellare con. How to make an AJAX-request look like a regular, normal request.

Per sbarazzarsi dell'intestazione ma senza successo.

Quindi alla domanda vera come si ottengono le richieste di cross origin per funzionare correttamente come fanno nel gestore del suono? /c'è qualcosa di ovvio che mi manca questo sta causando questo.

____ JSON P Tentativo come da commenti ____

$(document).ready(function() { 
     $.ajax({ 
      url: 'https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY5MjUxNDl9fX1dfQ__&Signature=bd0d9hCWuXTWtdkHMVJEAYMjOyT31G1nAt9Ak3A1kKHGvNu~Ix5SqJ75OHr~R1MlfaVX3scQoqu8LSTfRdZUgOKnzRVYUpZAIKBKC-vcmdy1LNW9ounvZDdgMU6o9th4wiO2fx3HEu~UDmrypW6SgmrHWt0Smp3S8l0ypt80iKESRJHdRYI6Y~dewta~f3CGe7Om8EfzO8ZDwieGVP2sxmrYCf6rnSNKwXtcH1OXmPdkcKEJiCrxNzL8xFfNI8ONXjHm6Vj05EFc6dYOEAIxvhMR6A~uqex7tytxFocrX9C0dCL~ND-89K7oSkWgBT28WgQ8fMySx7HTTHbc3gwd4A__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ', 
      dataType: 'jsonp', 
      async: false, 
      success: function (data) { 
       $('#myAudio').attr("src","data:audio/mp4;base64,"+data); 
        $('#myAudio')[0].mAudioPlayer.load(); 
        $('#myAudio')[0].mAudioPlayer.play(); 
      } 
     }); 
    }); 
+0

Vorrei provare a utilizzare JSONP – CapelliC

+0

@CapelliC A meno che non sto facendo/capisco male la richiesta jsonp deve essere risolta prima di poter iniziare a riprodurla. Aggiungerò un pezzo di codice di esempio che non sembra funzionare per me forse avrai qualche approfondimento. – Spaceman

risposta

0

Per quanto riguarda la questione CORS, penso che stai avendo lo stesso problema come questo tizio' qui: SoundCloud Api redirect confusion and Audio Api Streams

Quanto al motivo per funziona con SoundManager e non con le tue richieste, è più difficile rispondere. Osservando il codice sorgente di SoundManager e giudicando dall'uso di firebug, presumo che tu stia utilizzando Firefox. Firefox ha (o almeno ha avuto) un supporto fiacco per mp3, il che mi porta a pensare che il tuo Firefox non supporti gli mp3, o che SoundManager pensa che non sia così (la logica html5CanPlay in SoundManager è semplicemente non t una lettura divertente ..), e quindi downgrade per usare Flash per la riproduzione. In tal caso, i risultati visualizzati potrebbero essere dovuti al fatto che la richiesta per lo streaming viene eseguita tramite ActionScript, che probabilmente potrebbe generare una richiesta dall'aspetto diverso.

+0

Ahimè Firefox non credo che la colpa abbia problemi simili in chrome. Atm Ho cambiato completamente l'uso di sound manager che sta funzionando bene ora sospetto che la tua impressione riguardo il flash sia la causa del funzionamento degli stream non corretto come ho provato in ambienti senza flash, ovvero un ipad (almeno penso che non 'ho il flash) e ottengo gli stessi risultati. Continuerò a scavare :) grazie per l'intuizione – Spaceman

+0

Ah, peggio. Vero che gli iPad non eseguono il flash, però! –