|
HTML - Position The Audio Player
Does anyone know how to position the <audio> player so it's stacked on top of a background image? If I make the player visible with <audio controls="controls">. I tried to treat it as an image by:
Code: <style> <!-- this is the background image -->
#container {
display: block; margin-left: auto; margin-right: auto;
position: relative;
border:none;
width: 380px;
height: 633px;
background-image: url("pictures/kohakuriver1.png");
background-position:center;
<!-- this is the audio player -->
#container audioplayer {
position: absolute;
border:none;
left: 65px;
width: 245px;
height: 53px;
#audio {top: 700px}
</style>
...
...
<body>
...
<div id="container">
<audio controls="controls">
<source src="music/hupochuanClip.mp3" id="audio" type="audio/mpeg"/>
<source src="music/hupochuanClip.ogg" id="audio" type="audio/ogg"/>
</audio>
</div>
</body>
It didn't work completely, it did move it to some odd place but not where I want it. Changing the height value won't have any effect (I tried changing it to like 7000px and it's still in the same place). Similar TutorialsI'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"> 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. Hey all, I've built a website for my music and I'm fairly new to all this so bear with me. Essentially, I have two flash-based music players on my site. One is a simple single-track player that auto-plays some background music for the site. The functionality is limited to the user starting/stopping the music and adjusting the volume. The other is an advanced music player featuring a playlist of preselected tracks and allows the user to start/stop music, rewind, fast forward, adjust volume and select tracks in the playlist. This player does not start automatically. My question is this: when someone visits the site, the single-track background music player will start. Is there code that would allow the advanced music player, should it be turned on (i.e. someone selects a track and plays it), to override and actually stop the play of the single-track? TIA! I'm wondering if anyone knows if this is possible and if so how: I want to create a web page that will play a random audio file from a folder on my server. I'd like the user to hear the audio file and then try and identify it and be told whether they are correct or not and what the correct answer is. Can this be done with html or do I need to use flash? Any help would be greatly appreciated! Thanks. I'm not sure where the best place to post this question is, so I thought I'd start here and see what I get. I want to set up a video player like it is on this site: http://blueroomnyc.com/work/Q3hLj98J...story-refresh/ There are 3 links to different videos on the page, but they all open in the same place when activated. How is this accomplished? Is it javascript? I'd like to be able to do the same thing with an audio plugin as well. Thanks. 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 discount wedding dresses mother of the groom dresses 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 dress mother of the groom dress 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 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 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. Hey guys... I'm new and have looked everywhere. I can get an embedded WMV/AVI/etc. to work on my website and I can even position the file to where I want using my screen's resolution 1440X900, but when I view this website in a 1024X768 resolution, the embedded media file is not where it's supposed to be. Can anyone please please help me figure out how to embed a windows media file and keep the same position on the webpage for all resolutions (800X600 and up)... I have created the webpage with Adobe Imageready, and then edited the HTML accordingly to embed the media player. Please help.... Thanks.... Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? 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 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 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 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?? Hi everyone. I am working on a project with a few friends. The site is designed for people who are illiterate and so we are looking into how we could go about having audio cues play whenever the user hovers over a button or a section of an image map. If anyone would know of a good tutorial on how to do so in html5 it would be appreciated. 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 I am attempting to link to audio files that exist on my server using the anchor tag. I am able to download and play the audio files just fine on Firefox, Chrome and Safari, but not on Internet Explorer. When I click the link in IE, all I see is a bunch of random characters. Also, when I attempt to download the audio file IE attempts to download it as an html file. What can I do to fix this so that I am able to access these files via IE. Here is the code. Code: <a href="/audioFile.aif">audioFile.aif</a><br /> I currently run a phpBB3 forum, and I have one topic in particular that I want audio to play in. I did some looking around and found some HTML that would allow me to play an audio clip. I went to that topic, opened the source, plugged in the HTML, and after uploading the audio file, I pressed the apply changes, and it worked. The thing is, how do I SAVE it to the site? *The actual code I entered has the correct domain name. Code: <EMBED src="http://www.mydomain.com/forum/folder/who.wav" autostart=true loop=false volume=100 hidden=true><NOEMBED><BGSOUND src="http://www.mydomain.com/forum/folder/who.wav"></NOEMBED> Another question, not sure if HTML, but the favicon.ico for the address bar/favorites that I set works for Opera, but not for IE8...any ideas? |
|||||||