HTML - Random Audio File Player?

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.

I'm about to embark on something I realise will probably take a while to get right. Before I begin, it'd be good to pool opinions on the best approach. I've already done some preliminary research and to be honest at the moment it's all beyond my understanding!

The goal is to create a custom player of audio and video files with custom GUI, as part of a webpage. I don't want to use Quicktime because, AFAIK, it would prohibit a custom "look".

It may be necessary to create four separate players as the following situations need to be accommodated:

1) playing a single audio file
2) playing an "album" of audio files, in sequence
3) playing a single video file
4) playing an "album" of video files, in sequence

The player GUI would feature a "screen". When playing a video, the screen would show the video. When playing an audio file, there would be a still image associated with each song which would occupy the screen.

Then below the screen would be the usual apparatus for people to control playback: a trackbar, time counter, buttons for "play", "pause" and "stop". There would also be "next" and "previous" buttons for use when playing an album - they would be disabled when playing a single audio or video.

I have a few questions...

1. Apart from Flash, I don't want my visitors to need to install any software before they can use the player. I presume this depends solely on the media formats involved?

2. What video format would you recommend? What about FLV?

3. What audio format would you recommend? Ideally I'd like to use OGG but if that would introduce complications then I'll use something else.

4. There's always going to be a download button on the player so that the visitor can download the file being played. Now I've noticed on some sites that if a video is loading (before being played), and you attempt to directly download it, sometimes the download will "fail" at the point at which the loading was halted. So if the video has only loaded 40% and you start downloading it directly, the resulting file on your harddrive will only be 40% of what it should be. It's probably due to the streamed video being downloaded to an anonymous temp folder and being left in an incomplete state which the OS then thinks is a completed download. Can anything be done to stop this happening? Perhaps hide the "download" button until the file has finished loading?

Below is a mock-up of how I'd like the player to look, so you know what I'm going for. The purple background is supposed to resemble an HTML page.



I look forward to reading people's views.

Thanks for reading this long post,
Seymour.

Can i use javascript to control the file that playing by the real audio plug in, i mean i embeded the plug in, and i want to dynamically assign the files by using the drop down listbox. I had tried it , but although i successfully set the filename, but cant control the start value.

Another question is whether window media play can play real audion file or not ??

Thanks for answering.

mother of the bride dress
discount wedding dresses
mother of the groom dresses

Hello all.
I am still new to HTML coding.
I come from the dark side (flash)
and am seeing the light

anyway I am building a "flash alt" site
and I am building it around the Cargocollective.com platform.
and I DESPERATELY need a HTML or JAVA or some other iphone / ipad friendly
music player for the site.

I have been searching for weeks but all I keep finding are the same flash plugs
that make the whole concept redundant.

any help, guidance, or advice on this matter would be greatly appreciated....
thanks

I am designing a web page using Wordpress and have a rudimentary but working knowledge of HTML and have resources to help, so bear with me...

My web site calls some audio files and they work fine. The line I am using is (a href=" url ") announcement (/a) Substitute appropriate GT & LT symbols accordingly...

When I activate the page, the audio player covers the entire screen and all I get is a slide bar showing the progress of the audio track. Very boring,...

What can I do to place an image there or change the size of the image to allow other image or words to be on the screen. I would appreciate it if I could get a sample of code to tweak.

How to play an audio file in HTML?



_______________

The audio files I use on my web page display the individual control (play stop pause buttons) windows on my monitor screen and all the music segments play when actuated. However some users report that they get a distorted page and nothing works. I am using XP and Vista with IE7. Can anyone help find the cause of the problem?

http://www.lvrny.net/theme.htm

Howdy,

I interning for a musician and part of my job is to make myspace bulletins.

What I want to do is embed one of those little media players in my bulletins so the song plays when someone opens the bulletin up...

the file is not on a website anywhere, it is on my computer in mp3 format (i believe)

so here is my question(s)

How do i get the mp3 in html format? and how do I embed a music player into a mysapce bulletin?

______________
notes:

Through My Documents I've opened up the file in InternetExplorer in hopes that I could use that html address...... the media player DID show up in the Myspace bulletin, however, the music would not playback (when I hit the play button it just said "stopped."

I've googled "embed media player in myspace" and other key words but i'm still not understanding nor am i finding the information i am looking for...

_______________

I really want to learn how to this so any advice will be greatly appreciated!
Cheers!


feel free to IM me
MSN: DJMi55ing@live.com
AIM: (please ask)

Hi everyone. I am new to this forum and have very basic HTML knowledge. I've set up a page at

http://www.freudiansliprecording.com/thelastsupper

which, as it is coded now, automatically plays a goofy 5 second MP3 audio file when the page loads.

What I would like to do is have the page randomly choose between 2 or three different of these very short MP3 audio clips and play one of them (and only one of them) when a visitor first comes to this page.

Can anyone here recommend a way for me to do this? I do not want a visible player for this randomly chosen clip.

Thank you all very, very much in advance for your help

Cheers,
Kevin

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.

This may be a relatively easy answer but here we go....

HTML Code:

<a href="audio.wav">Play this wav file!</a>

The above is just a simple example but my problem is that no matter what I keep getting prompted for a download... Is there any specific reason why IE7 cannot directly access wav files or is this issue due to security settings.... Normally, in the past I haven't had an issue but at this time I am at a loss....

Any help would be appreciated...
Thanks,
Dark_Jackal

I'm trying to playback an mp3 from within a table cell using a <a href> link. I don't want to use Flash and also don't want to use the HTML5 <audio> tag.
I found this code
Quote:
function DHTMLSound(surl) {
document.getElementById("dummyspan").innerHTML=
"<embed src='"+surl+"' hidden=true autostart=true loop=false>";
}

<span id=dummyspan></span>
<form>
<input type="button" value="Play Sound" onClick="DHTMLSound('success.wav')">
</form>
and tried to incorporate it into the page. No luck.

I think should be able to add the onClick part to the <a href> and have it play, but I get nothing.

Thanks for any help,
Mei

Hey,

On my site i have currently got windows media player to play an embedded wma file
Code:

<object id="MediaPlayer" height=46 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="filename" value="Windows XP Startup.wma">
<param name="Showcontrols" value="True">
<param name="autoStart" value="True">

<embed type="application/x-mplayer2" src="Windows XP Startup.wma" name="MediaPlayer"></embed>

</object>

That's my current source code for it

ideally i would like to make it have the playlist option so on the playlist they can double click which songs they would like to listen


Is this possible

Cheers

Lolium

P.s, would it be possible for people who view the web page to browse the directory were the audio files will be kept? so they can choose which song to play??

I want to be able to add a mp3 audio file of a sermon to a church website I am building. I have done searches and find a lot of "embed" code, but none of these work. Nothing shows on the web page.

What is the simplest way of doing this. I understand "embed" is not a legal word. I have tired "Object", but nothing shows using this command either.

Any help will be appreciated.

Lawrence

Hello,
I'm creating a site that requires the inbuilt audio player to keep streaming music between page loads. What coding options are available for this, HTML, PHP or otherwise?

Regards
Eddie