jquery - Cors Html5 Jquery/SoundManager 奇怪

Question

所以我在使用 soundcloud api 和 html 5 音频播放器时遇到了一些问题。

主要目标是仅使用 html5 访问所有公开可用的 soundcloud 曲调。

我正在使用以下内容。

    //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);

我正在从 soundcloud 取回这个。对于一些相关的测试用例再次削减

    {
        "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"
            }
        ]
    }

这是通过我页面上的 ajax 调用的，然后我在页面上渲染了一堆 html，并绑定(bind)到 onclick 函数，如下所示。

    $.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);
        }
    });

$("#myAudio") 等于

    <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>

现在这适用于我大约一半的歌曲。它适用于 Rio - NetSky - 210032350。然而，对于波特罗宾逊 - 闪烁 - 它没有。我收到以下错误:

    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).

作为一个奇怪的怪癖，如果我在更改 src 后从我的页面中删除 crossorigin="anonymous"(在 firbug 中手动)，它会播放歌曲(正确)。更奇怪的是，在那之后所有的歌曲都会播放但没有声音 >:S。

从开头删除 crossorigin="anonymous"没有任何效果。

但是，如果我使用声音管理器方法，它似乎工作正常。

    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()
        }
    );

现在回到问题的核心。

html5 方法和 Sound Manager 方法都使用 get 请求命中以下 url。

    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 请求和响应 header

    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

声音管理器请求和响应 header

    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

请注意 Origin: 存在于第一个请求中，而不存在于第二个请求中。现在我尝试摆弄。 How to make an AJAX-request look like a regular, normal request .

去掉标题但无济于事。

那么对于实际问题，如何让跨源请求像在声音管理器中那样正常运行？/是否有明显的我遗漏的原因导致了这一点。

____ Json P 根据评论尝试 ____

    $(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();
            }
        });
    });

Answer 1

至于 CORS 问题，我认为您遇到的问题与这里的这个家伙相同:SoundCloud Api redirect confusion and Audio Api Streams

至于为什么它适用于 SoundManager 而不是您自己的请求，这很难回答。通过查看 SoundManager 源代码并根据您对 firebug 的使用来判断，我假设您使用的是 Firefox。 Firefox 对 mp3 有(或至少曾经有)参差不齐的支持，这使我认为您的 Firefox 要么不支持 mp3，要么 或 SoundManager 只是认为它不支持(html5CanPlay 逻辑在 SoundManager 中读起来并不有趣..)，因此降级为使用 Flash 进行播放。如果是这样，您看到的结果可能是因为对流的请求是通过 ActionScript 完成的，这可能会生成看起来不同的请求。