Question

Not sure if this is a really obvious question or not, but I need to have an embedded music player continue playing while the user views the rest of the website (clicking links to view different pages, etc.). So basically splitting the page into different segments, that load seperately. Years ago I would have done this with the HTML frames but that’s obviously not such a hot idea anymore.

Hopefully this makes sense, and thanks in advances for all responses.

Answer 1

Let’s resolve the ambiguity in our use of the word ‘frame’. While it is true that the <frame> tag will be discontinued in future versions of HTML, the <iframe> tag will continue to be supported, and it makes for an ideal solution to your problem. Your whole website will consist of two major elements in the body:

1. The music player, and
2. A nice big <iframe> to hold the navigable portion of your website.

This will allow the music player to play continuously while all the navigation occurs in a separate frame, effectively keeping the music player ‘static’, and the rest of the page dynamic. Best of all, once browsers begin to support HTML 5, you will be able to use the new seamless attribute to help integrate the frame into the look of your page. Until then, you will need to manually remove the border and scrollbars, to stay consistent across all browsers. You can achieve this with the following:

<iframe src="navigable_page.html"
             frameborder="0" 
             scrolling="no" 
             marginwidth="0" 
             marginheight="0" 
             vspace="0" 
             hspace="0">
</iframe>

Remember to set the height using CSS. With this approach, you also have a lot of flexibility in your layout, and you don’t have to redesign anything if you don’t want to. Options include having the frame take up the whole webpage, with the music player in front of everything else, draggable, resizable, etc. Web designers would wonder how you created a music player that is independent of the rest of the changing content. You could also have a table that occupies the whole page, with two rows. The top row could have the music player, and the bottom row could contain the frame with height set to 100%. Use frames, as in iframes, and you won’t be disappointed.