Solved

Embedded Audio player in web pages

Posted on 2012-04-09
2
708 Views
Last Modified: 2013-11-19
I am hoping someone here may know what would be a good audio player to embed in webpages.  I've tried several players, but haven't had any luck getting something to work in Windows 7 Firefox 11 browser.  The buttons don't work for me, but can start and stop the files using the space bar.  I am also finding the page playing all the songs simultaneously in PC Chrome. Haven't had trouble on a Mac.

Is there any all around good player for mp3s for the web?

Here is my page:http://americanart.si.edu/luce/mixtape/

This is the first player used:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="200" height="20">

<param name="src" value="/luce/mixtape/audio/TrainingWheels.mp3" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <param name="autostart" value="0" /> <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />

<!--[if !IE]> <-->

<object type="audio/x-mpeg" data="/luce/mixtape/audio/TrainingWheels.mp3" width="200" height="20"> <param name="src" value="/luce/mixtape/audio/TrainingWheels.mp3" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <param name="autostart" value="0" /> <param name="pluginurl" value="http://www.apple.com/quicktime/download/" /> <embed src="/luce/mixtape/audio/TrainingWheels.mp3" type="audio/x-mpeg" width="200" height="20" autostart="false" controller="true" ></embed> </object>

<!--> <![endif]-->
</object>

This is the second quicktime player (used in the remain 4 songs):
<embed width="200" height="20" pluginspage="/quicktime/download/" autoplay="false" src="/luce/mixtape/audio/MistyEyes.mp3"></embed><br /> <p class="noindent">

Thank you!
0
Comment
Question by:cbeverly
2 Comments
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 37826968
Using Windows 7 and FF 11.0 the page works perfectly for me.  All the bars appear in the right places and the music plays when I click the appropriate button.  Of course, I can start two audio streams at the same time and this sounds goofy, but you can't fix goofy client behavior.  In Chrome all of the embedded audio files started playing at the same time.  Inmy experience, it's always been better to put one audio file on the page at a time, and just provide links if you want to present multiple audio files to the client.

See http://validator.w3.org/check?uri=http%3A%2F%2Famericanart.si.edu%2Fluce%2Fmixtape%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

You might want to consider a couple of things.  Are all of the <object> tags closed?  Consider adding "type=" attributes to the object.  Maybe type="audio/mpeg" or type="video/wmv"?  Not sure, but those should be worth testing.

Best regards, ~Ray
0
 

Author Closing Comment

by:cbeverly
ID: 37828458
Thank you. Adding the object tags worked.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question