How do I change CSS properties when a music player starts using JavaScript?

Question

I have a music player on my page, the code for which is this:

<!--SCM Music Player by Adrian C Shum - http://scmplayer.net-->  
<script type="text/javascript" src="http://scmplayer.net/script.js" ></script>  
<script type="text/javascript">  
SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}], 'onplay': function() {alert('playing');},'placement':'bottom','showplaylist':'false'}");  
</script>  
<!--End of SCM Music Player script-->

I also have two images, the codes for which look like this:

<html>
<head>
<style type="text/css">

#img1{
  position: fixed;
  right: 10px;
  bottom: 100px;
  z-index: 10;
  visibility:hidden;
}

#img2{
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10;
  visibility:hidden;
}

</style>
</head>

<body>
  <img src="IMAGE1.png" id="img1">
  <img src="IMAGE2.png" id="img2">
</body>
</html>

I would like to work it so both of those become "visible" when the player starts. What would I need to add/take out/replace for this to work?

Mahmoud Fayez · Answer 1 · 2012-10-05T20:23:07.830

0

using jQuery I would write this javascript code

<script>
    function ChangeCSS()
    {
        $('#img1').css({ //new css style goes here
                         z-index : 10 
                      });
</script>
// in your init method there is onPlay method use it to call this function.

edited Oct 05 '12 at 20:23

answered Oct 05 '12 at 20:15

Mahmoud Fayez

3,398
2
19
36

score 0 · Answer 2 · answered Oct 05 '12 at 20:18

It's going to depend on whether the SCMPlayer gives you the ability to specify a "callback," which is essentially a piece of code that the player calls when a certain event happens.

An alternative would be to use a set of external controls to manage the player, and attach your code to that. The docs for SCMPlayer (http://scmplayer.net/#api) give instructions on how to call play/pause from a click. You could adapt that to call a custom function which sets the visibility of your items appropriately.

And although you didn't specify it in your original question, jQuery makes the manipulation of DOM elements like this very easy. You'll want to look into it to see if it's appropriate for your situation. :)

score 0 · Answer 3 · answered Oct 05 '12 at 20:19

0

There is an onPlay callback. You can probably use that.

Untested example code:

function displayElement(id) {
    document.getElementById(id).style.visibility = 'visible';
}

onplay: function() {
    displayElement('img1');
    displayElement('img2');
}

answered Oct 05 '12 at 20:19

Robin Drexler

4,307
3
25
28

Where would I put that in the code I already provided, though? – Rigel Turdiu Oct 05 '12 at 20:36

How do I change CSS properties when a music player starts using JavaScript?

3 Answers3