Broadcast player in a simple web site
(2 votes, average: 5.00 out of 5)
Loading ...SWiSHzone.com’s Labs project, Broadcast, allows you to stream both live DJ programs and scheduled playlists. At the client side, there is the Broadcast player which is a Flash movie we created using SWiSH Max3. The player is designed to be embedded on a web page. If you want users to be able to move around the site, without the player reloading each time a new page is loaded (and so pausing the music while re-buffering takes place), then there are several techniques to do this. This article discussed a solution using AJAX and mentions some other techniques which achieve similar results.
Loading your pages using AJAX
We have setup a website demonstrating an AJAX solution here - http://broadcast-demo-1.swishspace.com/. This solution is suited to a site which exists specifically for a Broadcast station. Make sure your index page has sufficient information for proper SEO – Google, Bing, and others don’t yet invoke JavaScript clicks (correct me if I’m wrong!) so the content loaded by the AJAX functions won’t be indexed. AJAX calls (sometimes referred to as XMLHTTP requests) load the content from files on the web server, and that content is inserted into the HTML page (in this case, index.html).
Now let’s look at how it works by examining the main HTML file (index.html). Open the demo site ( http://broadcast-demo-1.swishspace.com/) and right click the page and select view source to look at the HTML code upon which it’s based.
As you click on links to navigate around the site, we never move away from index.html. Each of the menu links has an ‘id’ specified in its HTML <a> tag, and an associated JavaScript listener is set up to notice when a click takes place on the link.
<div id="menu_bar"> <a class="menu_item" id="menu_home" href="javascript:void(0);">Home</a> <a class="menu_item" id="menu_page2" href="javascript:void(0);">Page 2</a> <a class="menu_item" id="menu_page3" href="javascript:void(0);">Page 3</a> <a class="menu_item" id="menu_contact" href="javascript:void(0);">Contact</a> </div>
When a link is clicked, the code attached to the listener runs, which invokes the loading of HTML content for the <div>. As well as displaying the content, it ‘un-bolds’ all the menu link text items, and make bold the text for the menu item which received the click. The href attribute of the link actually does nothing but needs to exist. Here is one of the click listeners, which you can see in a <script> tag in the <head> section on index.html…
$("#menu_home").click(function() {
do_home(this);
});
The listener references the id tag in the HTML, and calls a function to load the content and replace the content of a tag which exists within the HTML <body>…
function do_home(element) {
$("#content_via_ajax").load('home.html');
$(".menu_item").each ( function() {
this.style.fontWeight = "normal";
});
element.style.fontWeight = "bold";
location.hash = "home";
When index.html first loads some extra code is run to select the content according to the ‘hash’ component of the URL, if it is selected, via the same functions used to process the click events. You can see this code defined below the listeners.
if (location.hash == "#page2") {
do_page2(document.getElementById("menu_page2"));
} else if (location.hash == "#page3") {
do_page3(document.getElementById("menu_page3"));
} else if (location.hash == "#contact") {
do_contact(document.getElementById("menu_contact"));
} else {
do_home(document.getElementById("menu_home"));
}
});
The real magic which made this site so easy to make is the freely available, and well documented, JavaScript library - jQuery. In the <head> section of index.html, notice the library being referenced.
Of course it’s not just SWiSHzone.com Labs Broadcast players which can use this technique. It could be applied it to any Flash movie or other content.
Other methods of keeping the Broadcast player from reloading as user navigates content
Opening the player in a new browser window or tab
This is the simplest solution. Simply use HTML.
<a href="player_page.html" target="_blank">Click to start the player</a>
This is reliable and very easy to implement, however your site visitors must click to start playback. Thi smeans browser configurations may affect whether a tab or a window opens, and the important visual element of the player, as well as the track information within the player, tends to be lost, as the player may end up behind other windows. Other content on your site will be nicely indexed by search engines, however if the Broadcast player is an important feature on your site, having it hidden behind other content is a problem.
Open the player in a new browser window using JavaScript
Almost all browsers will prevent pop-ups unless give specific permissions. It will typically take several clicks to enable a site, and a large proportion of your uses won’t ever do this. Your site will be nicely indexed by search engines, but if the Broadcast player is an important feature, you’ll still miss a large part of your potential audience.
Open the player in a window which is part of a frameset
Frame sets definitely have their uses, however they tend to introduce strange scrolling behaviors where scroll bars are enabled, and can limit the length of comment, or force longer pages lengths. Some problems traditionally associated with frame sets can be overcome, using javaScript (e.g. book marks), but as your site gains more pages, maintenance becomes much more difficult.
Embed the player within a full Flash web site
A Flash web site is a container Flash movie with other embedded Flash movies. This is a great way to manage a site where you want a feature such as Broadcast’s player to run independently of other aspects of the site. Search engines are now much better than they used to be at indexing Flash content. We’d suggest SWiSH Max3 is a great product if you want to go this route.
Feel free to comment or ask a question or start a more in-depth discussion at our forums site - http://forums.swishzone.com/.
Well that’s it for this article, so as always, and Happy SWiSH’ing!
Hm, pretty good stuff. Do you provide any kind of rating service because I can’t find it.
Thanks
Eric Nolls