/    Sign up×
Community /Pin to ProfileBookmark

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>
[/CODE]

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;
}
[/CODE]

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>[/CODE]

CSS:

[CODE]
#musicboxplayer {
position:relative;
width:86px;
height:25px;
}

.collapsearrow {
float:left;
}

#song1,#song2,#song3,#song4 {
width:150px;
float:left;
}
[/CODE]

Does anyone know what’s causing this?
Thanks.

to post a comment
HTML

0Be the first to comment 😎

×

Success!

Help @Windbrand spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...