HTML - How To Play Selected Audio Files Using 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.

Is it possible to simply add the word "Play" to an html web page,
which, when selected, would play an audio file stored in my web page directory?

If possible, can you provide the code?

i'm guessing the web visitor would simply need audio player software on his/her computer? Which is on most if not all computers today. Correct?

thanks.

How to play an audio file in HTML?



_______________

When I put in my code, it works just fine on my Mac in Safari or Firefox.
However, when I test it on a PC in Explorer 7 or 8 it starts playing automatically.

This is what my code looks like: Code:

<audio controls="controls">
  <source src="/media/GOAL.wav" type="audio/wav" autostart="false"/> 
<embed height="100px" width="200px" src="/media/GOAL.wav" />
</audio>

The "autostart" code I put in apparently is wrong. Is there a way to fix this so it does not autostart in Explorer and any other browers? Thx.

Hello,

I have a client were working with. He uses myspace. He wants a youtube video to autoplay from youtube. He wants it to look sleek and doesn't want the controls buttons to show. I've read this is possible but can't get the div code right. It's an HD video and it's height="480" width="720".

We came across this url: http://www.createblog.com/myspace-sc...eo-top_bottom/

and We found this code as an example it says:
Where it says YOUTUBE URL HERE insert your youtube embed url, not the url of the YouTube page.

Change the first 380 and the 230 to change the video's size and the -90 to position the video.

****
<div style="width:380px; height:230px; overflow:hidden!important; text-align:center;"><br />

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="410" width="380" style="position:relative; top: -90 px;" data=" YOUTUBE URL HERE ">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="YOUTUBE URL HERE" />
<param name="wmode" value="transparent" />
</object>

</div>
****

This is our code were tried but it is not working? can you please help us. Thank you in advanced.

Our code we tried:

****
<div style="width: 720 px; height: 480 px; overflow:hidden!important; text-align:center;"><br />

<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height=" 410 " width=" 380 " style="position:relative; top: -90 px;" data=" http://www.youtube.com/v/vaKuFww3ljM&ap=%2526fmt%3D18&loop=1&controls=0&showinfo=0&autoplay=1&&iv_load_policy=3 ">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value=" http://www.youtube.com/v/vaKuFww3ljM&ap=%2526fmt%3D18&loop=1&controls=0&showinfo=0&autoplay=1&&iv_load_policy=3 " />
<param name="wmode" value="transparent" />
</object>

</div>

****