Category: "HTML / CSS"
Browser Based Audio Preview / Listen - IE6/7/+, FF2+ - HTTP/HTTPS
Jun 21st
The following code segment is an extract from a Smarty template which allows you to embed Windows Media Player in a web page and use javascript to initiate playback. AUDIOFILE.WAV is a marker name, you will need to use a valid URL.
The code uses two different methods for Internet Explorer (IE) and Firefox (FF).
For IE, it uses an object tag and the object model to initiate playback with player.controls.play and stop. Note the assignment of the source URL and data, this allows you to change which audio (or video) is being played.
The FF approach uses a pop up, opened with window.open. This loads a very small page which includes the player tag. The pop up is named, so later requests will reload the same window.
The template uses $bFF as a flag to indicate whether to deliver the page content for IE or FF. $bFF is true if the user agent is Firefox, false otherwise. The template logic can be replaced with PHP.
{if !$bFF}
<object id="wmp_p" name="wmp_p" style="display:none" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="0" height="0"></object>
<script type="text/javascript">/* <![CDATA[ */
var sAudioFile='AUDIOFILE.WAV';
{literal}
var player=document.getElementById('wmp_p');
function StartMeUp()
{
if (sAudioFile!='')
{
player.URL=sAudioFile;
player.data=sAudioFile;
player.controls.play();
}
}
function ShutMeDown()
{
player.controls.stop();
}
{/literal}
/* ]]> */
</script>
{else}
<script type="text/javascript">
/* <![CDATA[ */
var sAudioFile='AUDIOFILE.WAV';
{literal}
function StartMeUp()
{
if (sAudioFile != '')
window.open('player.php?'+sAudioFile,"player","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=275, height=95");
}
function ShutMeDown()
{
if (sAudioFile != '')
window.open('player.php?',"player","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=275, height=95");
}
{/literal}
/* ]]> */
</script>
{/if}
<a href="javascript:StartMeUp();" title="Listen" id="Preview" name="Preview"><img src="images/cp/16x16/actions/player_play.png" alt="Listen" /></a>
player.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Audio Preview</title>
</head>
<body>
<div>
<img src="images/cp/64x64/apps/arts.png" />
/* Some code omitted for brevity */
<!-- Some code omitted for brevity -->
<object id="wmp_p" data="<?php echo $_SERVER['QUERY_STRING'];?>" type="application/x-ms-wmp" width="175" height="75" >
<param name="autostart" value="true" />
<param name="volume" value="10" />
<param name="uiMode" value="mini" />
<p>Error - the plugin has not loaded</p>
</object>
</div>
</body>
</html>Difficulties were encountered playing HTTPS audio with a self-signed certificate under FF. After research, the simplest resolution was to route audio requests through HTTP.
Resources:
http://www.w3schools.com/media/media_playerref.asp
http://port25.technet.com/pages/
http://support.mozilla.com/en-US/kb/Using+the+Windows+Media+Player+plugin+with+Firefox
For MP3s, you can use: http://docs.dojocampus.org/dojox/av/FLAudio
——————————-
This post courtesy of Lyrix, Inc. ( http://lyrix.com ) - Mobiso ( http://mobiso.com )
Psuedo 'Slide Show' - Displaying and Hiding divs
Apr 13th
This is a nice example of the setInterval function of javascript.
Key features:
- Divs can be added without modifying the code
- Div naming scheme (div#) reduces collisions with other page content
- setInterval drives the process
- Tested with IE7 and FF3.5
- Doesn’t require Flash or other complex content
- Presentation interface can be managed with CSS
<html>
<head>
</head>
<body>
<!-- Name all the divs with div and a number, they must be sequential and they must start with 1 -->
<!-- You can add more divs as needed, first div is displayed, all others are display:none -->
<div id="div1" style="display:block">One</div>
<div id="div2" style="display:none">Two</div>
<script type="text/javascript">
var loop_pause=2000;
var int=self.setInterval("rotate()",loop_pause);
/* d indicates the current div */
var d=1;
/* newDiv is the one to be shown, firstDiv is the first in the list, and lastDiv is the last one that was shown */
var newDiv,firstDiv=document.getElementById('div1');
var lastDiv=firstDiv;
function rotate()
{
/* The first div is shown on page load, so advance d */
d++;
/* Try to get the next div */
newDiv=document.getElementById('div'+d);
/* If there is no div d */
if (newDiv == null)
{
/* Cycle back to div1, firstDiv */
newDiv=firstDiv;
/* Reset d */
d=1;
}
/* Hide the previous div */
lastDiv.style.display='none';
/* Display the new or next div */
newDiv.style.display='block';
lastDiv=newDiv;
}
</script>
</body>
</html>Rounded Rectangles Notes
Dec 20th
Creating rounded rectangles has become a bit of a quest.
This blog links to a utility that lets you create a rounded rectangle image that can be used in a page to help organize the content (http://wirehopper.com/design/rounded.php). It has a link to an approach that allows you to create nine images and use them to display a rounded rectangle using CSS and XHTML. Unfortunately, it doesn’t work (http://www.wirehopper.com/design/rr/). So far, the nicest implementation of rounded corner rectangles I’ve found for page layout is eZ publish’s ezwebin (http://now.ezpublish.no/).
Another approach I tried was to use dojox/gfx, which uses javascript to draw on a page.(http://docs.dojocampus.org/dojox/gfx#rectangle). This works really nicely, however, if you want to place text in the rectangle, you must be creative. The approach I tried was to use divs to position the rectangles, then use absolute positioning of additional divs to put text in the boxes. To be dynamic, the dimensions of the rectangles must be adjusted to work well with the content they’ll surround. This can be done fairly easily with javascript, by getting the dimensions of the text div using screen.clientWidth and screen.clientHeight.
After investing a significant amount of time in this fundamental layout issue, I have come to the conclusion that if you have a framework or library that has themes (http://docs.dojocampus.org/dijit-themes), you should choose one and use it, and if not, unless you’ve already found a great way to do rounded rectangles, or you really have to have them, it’s probably not worth the effort.
Rounded rectangles are excellent learning tools for web designers and developers, because they include several skill areas.
- Proper image format. .gifs are probably the best for simple rounded rectangles, including those with transparency, .jpgs or .pngs would be good if there are gradients. It’s worth checking the file sizes and checking how they look on the page.
- CSS layout and dimension control. Depending on the implementation, you may have a three by three block. Each ‘row’ will float, and between the rows, there must be a break. Browser compatibility must be tested.
- Page construction. Computing the bandwidth required for each rounded rectangle is another good exercise. The bandwidth required includes the XHTML, CSS, and all images. Reusing CSS and images can reduce both bandwidth and the number of requests.
- Server-side support. I looked into using PHP to help set up the dojox/gfx rounded rectangles, but abandoned it due to time constraints. Using a server-side technology, or template engine / taglib may be helpful.
- Appreciation of complexity. Many people mistake the simplicity of the XHTML language as an indicator that web work is “easy”. It’s not.
- Cost of labor. As above, it is good to understand that if a task takes longer, one must consider the cost. Spending many hours on rounded rectangles will undoubtedly reduce the time available for other, more important, tasks. In the business world, time is money.
This ends the quest for rounded rectangles. I learned:
- Rounded rectangles are not simple.
- Even if you invest a lot of time, sometimes, there isn’t a ‘graceful’ solution. Bear in mind this is a subjective definition - others may feel that some of the offered ideas are perfect.
A lot about ImageMagick (http://imagemagick.org). Including …
- How to draw a rounded rectangle
- How to crop pieces out of an image
- How to tint an image
- How to apply a gradient to an image
- The CSS border attributes and how to apply them
- Rounded corners on images look really nice with ezwebin
- Many other people have posted cool ideas about rounded corners and rectangles - it’s a popular pursuit, or a necessary one. :)
- Rounded rectangles just aren’t that important to me anymore
Additional posts in this blog:
http://web-notes.wirehopper.com/2009/07/05/imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/06/07/smoother-imagemagick-rounded-rectangles
http://web-notes.wirehopper.com/2009/05/11/imagemagick-rounded-corners
http://web-notes.wirehopper.com/2009/11/19/ez-publish-rounded-image-corners
http://web-notes.wirehopper.com/2009/11/06/tint-with-imagemagick
http://web-notes.wirehopper.com/2009/06/27/round-image-corners-imagemagick
http://web-notes.wirehopper.com/2009/05/17/imagemagick-rounded-corners-images
Generate Backgrounds with ImageMagick
Nov 18th
Link is to a page that has daily dynamically generated background tile images, with a gradient overlay.
A fun way to make a site more interesting, especially for those with limited design skills. :)
Rounded Rectangle Container - Images and HTML
Nov 7th
The objective of this page was to find an efficient way to create a rounded rectangle that would dynamically resize based on content.
The width is fixed, but the height is variable.
Notes
- Border for center area uses a CSS border attribute instead of an image. It just works better. It also reduces the HTTP request count by 2.
- The color code used (#77777777) is for approximately 50% opacity.
- The header is a gradient, chopped for good contrast.
- ImageMagick commands are included.