Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Audio player is off position when I click play button

    I'm having a really odd problem with the html audio player. It looks fine if I don't click the play button, but the moment I click the play button, it would disappear and reappear around 15-20 pixels lower. Here is my code for a simple audio player:

    HTML:
    Code:
    <div id="audioplayer">
           <span class="eightonesmall" id="audiotext">&nbsp;Background music control</span>
            <audio controls="controls">
    		<source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
                    <source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" /> 
            </audio>
    </div>
    CSS:
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	width: 100%;
    	height: 100%;
    	overflow:hidden;
    	background-image:url(../pictures/drawings/backgrounds/menubackgroundbubbles.png);
    	background-position:center;
    	background-attachment:fixed;
    }
    
    #audiotext {
    	vertical-align:middle;
    	color:#CCCCCC;
    }
    
    #audioplayer {
    	position:fixed;
    	top:10px;
    	right:10px;
    	border:3px double #FFF;
    	height:30px;
    }
    The same problem occurs for an audio player that I've set to hidden, and will appear if I click an arrow and disappear if I click another arrow. It hides it and re-appears fine, just the player shifts down 15-20 pixels if I click play...

    HTML:

    Code:
    <div class="collapsearrow">
    	<img src="pictures/thumbnails/musicboxbuttons/collapsearrow.png" alt="collapsearrow"
    	onclick="document.getElementById('song1').style.visibility='visible';"/>Liangzhu
    	</div>
    <div id="song1" style="visibility:hidden;">
    	<img src="pictures/thumbnails/musicboxbuttons/contractarrow.png" alt="contractarrow"
    	onclick="document.getElementById('song1').style.visibility='hidden';"/>
    	<audio id="musicboxplayer" controls="controls">
    	        <source src="music/liangzhuhualuowuhui.ogg" type="audio/ogg" />
    		<source src="music/liangzhuhualuowuhui.mp3" type="audio/mp3" /> 
    	</audio>
    </div>
    CSS:

    Code:
    #musicboxplayer {
    	position:relative;
    	width:86px;
    	height:25px;
    }
    
    .collapsearrow {
    	float:left;
    }
    
    #song1,#song2,#song3,#song4 {
    	width:150px;
    	float:left;
    }
    Does anyone know what's causing this?
    Thanks.

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    No one uses the html audio player? =/

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    The odd thing is that the div the player is in does not move, only the visual of the player moves. What I mean is if I click the empty space above the moved player (where it originally was), I can pause/adjust volume/etc, but if I click where the buttons now actually are nothing happens. Essentially all the functions didn't reposition, only the visuals did.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •