检测轨道播放或mixcloud嵌入的当前时间?

时间:2014-05-07 00:52:22

标签: javascript json api embed

我的页面上嵌入了mixcloud节目。

例如:

<iframe width="660" height="180" src="//www.mixcloud.com/widget/iframe/?feed=http%3A%2F%2Fwww.mixcloud.com%2Fdjzhao%2Fjuju-juke-shangaan-footwork%2F&amp;embed_uuid=cd8d4d1b-9940-4548-9aff-1f411f5480c0&amp;replace=0&amp;hide_cover=1&amp;embed_type=widget_standard&amp;hide_tracklist=1" frameborder="0"></iframe>

我希望能够根据当前正在播放的曲目更改显示的文本。有没有办法检测正在播放的曲目或当前的播放时间并相应地更改文本?

mixcloud api可以返回cloudcast的信息,其中包括轨道列表和它们开始的时间,如下所示:

{
    "description": "Given I'm on the Mixcloud team, I thought I really should have something up here.  Here's an hour's worth of funky music to get you ready for partying, enjoy the music and ignore the quality (or lack thereof) of the DJ!", 
    "tags": [
        {
            "url": "http://www.mixcloud.com/tag/funky-house/", 
            "name": "Funky house", 
            "key": "/tag/funky-house/"
        }, 
        {
            "url": "http://www.mixcloud.com/tag/funk/", 
            "name": "Funk", 
            "key": "/tag/funk/"
        }, 
        {
            "url": "http://www.mixcloud.com/tag/soul/", 
            "name": "Soul", 
            "key": "/tag/soul/"
        }
    ], 
    "play_count": 1864, 
    "user": {
        "url": "http://www.mixcloud.com/spartacus/", 
        "username": "spartacus", 
        "name": "Spartacus", 
        "key": "/spartacus/", 
        "pictures": {
            "medium": "http://images-mix.netdna-ssl.com/w/100/h/100/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg", 
            "320wx320h": "http://images-mix.netdna-ssl.com/w/320/h/320/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg", 
            "extra_large": "http://images-mix.netdna-ssl.com/w/600/h/600/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg", 
            "large": "http://images-mix.netdna-ssl.com/w/300/h/300/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg", 
            "640wx640h": "http://images-mix.netdna-ssl.com/w/640/h/640/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg", 
            "medium_mobile": "http://images-mix.netdna-ssl.com/w/80/h/80/q/75/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg", 
            "small": "http://images-mix.netdna-ssl.com/w/25/h/25/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg", 
            "thumbnail": "http://images-mix.netdna-ssl.com/w/50/h/50/q/85/upload/images/profile/dfefd1a8-3932-47e1-bbd3-ac5fd2144d80.jpg"
        }
    }, 
    "key": "/spartacus/party-time/", 
    "created_time": "2009-08-02T16:55:01Z", 
    "audio_length": 3361, 
    "slug": "party-time", 
    "favorite_count": 11, 
    "listener_count": 90, 
    "name": "Party Time", 
    "url": "http://www.mixcloud.com/spartacus/party-time/", 
    "pictures": {
        "medium": "http://images-mix.netdna-ssl.com/w/100/h/100/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png", 
        "320wx320h": "http://images-mix.netdna-ssl.com/w/320/h/320/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png", 
        "extra_large": "http://images-mix.netdna-ssl.com/w/600/h/600/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png", 
        "large": "http://images-mix.netdna-ssl.com/w/300/h/300/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png", 
        "640wx640h": "http://images-mix.netdna-ssl.com/w/640/h/640/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png", 
        "medium_mobile": "http://images-mix.netdna-ssl.com/w/80/h/80/q/75/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png", 
        "small": "http://images-mix.netdna-ssl.com/w/25/h/25/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png", 
        "thumbnail": "http://images-mix.netdna-ssl.com/w/50/h/50/q/85/upload/images/extaudio/61a1279f-e3c0-4871-aa8e-c4cf5466edb8.png"
    }, 
    "updated_time": "2013-10-15T13:48:53Z", 
    "comment_count": 3, 
    "sections": [
        {
            "track": {
                "url": "http://www.mixcloud.com/track/jazztronik/samurai-12-mix/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/jazztronik/", 
                    "name": "Jazztronik", 
                    "key": "/artist/jazztronik/", 
                    "slug": "jazztronik"
                }, 
                "name": "Samurai (12\" Mix)", 
                "key": "/track/jazztronik/samurai-12-mix/", 
                "slug": "samurai-12-mix"
            }, 
            "position": 1, 
            "start_time": 0, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/time-of-your-life/refresher/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/time-of-your-life/", 
                    "name": "Time of your life", 
                    "key": "/artist/time-of-your-life/", 
                    "slug": "time-of-your-life"
                }, 
                "name": "Refresher", 
                "key": "/track/time-of-your-life/refresher/", 
                "slug": "refresher"
            }, 
            "position": 2, 
            "start_time": 416, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/dutch/my-time-feat-crystal-waters/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/dutch/", 
                    "name": "Dutch", 
                    "key": "/artist/dutch/", 
                    "slug": "dutch"
                }, 
                "name": "My time (feat. Crystal Waters)", 
                "key": "/track/dutch/my-time-feat-crystal-waters/", 
                "slug": "my-time-feat-crystal-waters"
            }, 
            "position": 3, 
            "start_time": 716, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/minimal-funk/definition-of-house/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/minimal-funk/", 
                    "name": "Minimal Funk", 
                    "key": "/artist/minimal-funk/", 
                    "slug": "minimal-funk"
                }, 
                "name": "Definition of House", 
                "key": "/track/minimal-funk/definition-of-house/", 
                "slug": "definition-of-house"
            }, 
            "position": 4, 
            "start_time": 1061, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/mint-royale/i-dont-know/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/mint-royale/", 
                    "name": "Mint Royale", 
                    "key": "/artist/mint-royale/", 
                    "slug": "mint-royale"
                }, 
                "name": "I dont know", 
                "key": "/track/mint-royale/i-dont-know/", 
                "slug": "i-dont-know"
            }, 
            "position": 5, 
            "start_time": 1500, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/michael-jackson/thrill-her/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/michael-jackson/", 
                    "name": "Michael Jackson", 
                    "key": "/artist/michael-jackson/", 
                    "slug": "michael-jackson"
                }, 
                "name": "Thrill Her", 
                "key": "/track/michael-jackson/thrill-her/", 
                "slug": "thrill-her"
            }, 
            "position": 6, 
            "start_time": 1763, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/elio-isola/happy-featcharlise/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/elio-isola/", 
                    "name": "Elio Isola", 
                    "key": "/artist/elio-isola/", 
                    "slug": "elio-isola"
                }, 
                "name": "Happy (feat.Charlise)", 
                "key": "/track/elio-isola/happy-featcharlise/", 
                "slug": "happy-featcharlise"
            }, 
            "position": 7, 
            "start_time": 2123, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/dancin/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/", 
                    "name": "Erick Morillo, Harry Romero & Jose Nunez feat. Jessica Eve", 
                    "key": "/artist/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/", 
                    "slug": "erick-morillo-harry-romero-jose-nunez-feat-jessica-eve"
                }, 
                "name": "Dancin", 
                "key": "/track/erick-morillo-harry-romero-jose-nunez-feat-jessica-eve/dancin/", 
                "slug": "dancin"
            }, 
            "position": 8, 
            "start_time": 2442, 
            "section_type": "track"
        }, 
        {
            "track": {
                "url": "http://www.mixcloud.com/track/kosheen/all-in-my-head/", 
                "artist": {
                    "url": "http://www.mixcloud.com/artist/kosheen/", 
                    "name": "Kosheen", 
                    "key": "/artist/kosheen/", 
                    "slug": "kosheen"
                }, 
                "name": "All in my head", 
                "key": "/track/kosheen/all-in-my-head/", 
                "slug": "all-in-my-head"
            }, 
            "position": 9, 
            "start_time": 2738, 
            "section_type": "track"
        }
    ]
}

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

MixCloud在2014中发布了一个与iframe通信的JavaScript API / SDK: https://www.mixcloud.com/developers/widget/

它使用window.postMessage进行与iframe的所有通信。

例如:

<iframe id="mixcloud-iframe" width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?feed=https://www.mixcloud.com/thisgreedypig/the-pigs-ear-money-ex-records-show-case/&hide_cover=1&mini=1&light=1" frameborder="0"></iframe>
<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script>
<script type="text/javascript">
    var widget = Mixcloud.PlayerWidget(document.getElementById('mixcloud-iframe'));
    function togglePlayPause () {
        // handle the ui
    }
    widget.ready.then(function() {
        widget.events.pause.on(togglePlayPause);
        widget.events.play.on(togglePlayPause);
    });
</script>