1

I would like to toggle the class 'hide' to the 'equaliser' div when the play button of an audio post is clicked within my tumblr theme. My HTML is as follows:

<div class="musicplayer">
<div id="playbutton">
{block:AudioPlayer}
{AudioPlayer}{/block:AudioPlayer}</div>
<div class="equalizer hide">
</div>

The issue is that tumblr imports the relevant code for the audio player, so the following script does not run: 

$('.playbutton').click(function(){
     $(".equalizer").toggleClass("hide");
});

In the source of the page, the HTML of this section is as follows:

<div class="musicplayer">
<div id="playbutton">
<span id="audio_player_151764783410"><div class="audio_player"><iframe class="tumblr_audio_player tumblr_audio_player_151764783410" src="http://myspacethemeology.tumblr.com/post/151764783410/audio_player_iframe/myspacethemeology/tumblr_o6qkb21Z4L1utbsw6?audio_file=http%3A%2F%2Fk003.kiwi6.com%2Fhotlink%2Fdge2vl4ftj%2F04_Into_You.mp3&color=white&simple=1" frameborder="0" allowtransparency="true" scrolling="no" width="207" height="27"></iframe></div></span></div>
<div class="equalizer hide">
</div></div>

The audioplayer is within an iFrame, and the class of the iFrame is different for every single audio post. Is there any script that can trigger an event when the play button is clicked?

RKC
  • 86
  • 6
  • I mistyped in this question, but #playbutton does not work either. Thanks though. – RKC Mar 10 '17 at 09:31
  • I was just on your site and noticed that the class is actually `.play_button`. I was able to access it via jquery using $(".play_button") – Adam Mar 10 '17 at 16:43
  • @Adam I've tried this and nothing seems to happen when I hit the play button. – RKC Mar 11 '17 at 17:27

2 Answers2

1

You cannot detect events within a CROSS DOMAIN iframe.

See this answer for reference.

Community
  • 1
  • 1
Adam
  • 3,142
  • 4
  • 29
  • 48
  • Thank you, however the iframe is still within the same domain as the page running the script (both are on http://myspacethemeology.tumblr.com). – RKC Mar 09 '17 at 23:10
0

You cannot detect event for crossdomain iframes as @adam said. But still you can do a tricky thing with CSS pseudo element. But this fix will disable control over your iframe. i.e) you cannot click anything in your iframe.

.audio_player{
    position:relative;
}
.audio_player:after{
   content:'';
   position:absolute;
   top:0; left:0; right:0; bottom:0;
}

your click event will work now. Hope this helps.

ajai Jothi
  • 2,284
  • 1
  • 8
  • 16
  • Thank you for the suggestion, but as the iframe contains the play button for the audio this is not useful in this case as the iframe needs to be clickable. I will remember it for future use though! – RKC Mar 09 '17 at 23:29