我的页面上嵌入了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&embed_uuid=cd8d4d1b-9940-4548-9aff-1f411f5480c0&replace=0&hide_cover=1&embed_type=widget_standard&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"
}
]
}
感谢您的帮助
答案 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>