Audio in HTML

Hi to everyone!
I've setup a website and I'd like, well the client, would like to have music on it.
I don't agree with him and will try convince him not to do so.
There's a slight problem, though... This is the final page:
http://www.ideachecercavi.it/
It doesn't have audio, it's perfectly XHTML compliant and it displays smoothly across browsers and platforms (I'm on a Mac, BTW).
If I use the <embed> tag, the validation gives me 4 errors:
http://www.ideachecercavi.it/test/testEmbed.html
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ideachecercavi.it%2Ftest%2FtestEmbed.ht ml&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1. 654
Plus, tested in BrowserLab, it shows a huge player in Win IE6,7,8 and FF3; on my Mac (Safari) it shows a small QT player, very nice.
When I use the <object> tag, instead, it passes the validation.
http://www.ideachecercavi.it/test/testObject.html
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ideachecercavi.it%2Ftest%2FtestObject.h tml&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1 .654
In BrowserLab, everything's fine with FF3, but the display is totally a mess with WIN IE6,7,8: Nothing appears in the page except for the media player.
And it's perfectly XHTML compliant... :-0
I just don't get this, can someone please share some thoughts about this issue?
Many thanks to all!
JC

Works for me Nancy. Show me someone without a Flash plug in.   That's all
you need. Buy the way I assumed that JC must have some knowledge of
or so that if he does not include a hidden ="true" then you
will have an on/off automagically. By the way, I never include sound unless my
web page customer requests it. You should understand before you become so
didactic. Thanks.
Joe
In a message dated 11/16/2009 2:22:42 P.M. Eastern Standard Time,
[email protected] writes:
Create a layer. Click in the layer and insert a plugin, you will be
asked for a file.
Sorry Joe, but that's just terrible advice.
Media Plug-ins are not reliable. If no such plug-in exists at the user's
end, no sound can be heard. Gratuitous sound files delay page load - a pain
in the neck for people on dial-ups or mobile phone connections where
bandwidth is an issue.
Finally, when you offer no on/off switch you risk alienating your site
visitors. Studies show most people who don't want the intrusion of sound
will leave your site instead of fumbling with their system's volume controls.
Use media files responsibly. Be considerate to site visitors and give
them a choice of downloading (playing) the file or not.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media   Specialists
http://www.alt-web.com/
http://www.twitter.com/altweb
http://www.alt-web.blogspot.com/

Similar Messages

How do I insert an audio in html? When the reader access the widget it will be transferred to a page in Safari?

How do I insert an audio in html?
When the reader access the widget it will be transferred to a page in Safari?

See iBooks Author: About HTML widget creation

Audio problems HTML 5

My narration does not appear in the HTML 5 output. I'm using Captivate 7. The swf. version does not seem to have this problem. When I go into the ar folder, I can see the audio, but it does not work online.

well for anyone else.
my html was fine. in fact the server nginx was returning the wrong content-type and so i had to add the MIME types into my nginx config file.

Play audio using HTML under HTML Resources

Hello:
I have created a HTML5 page that loads an audio and autoplays it. The code is shown below:
<audio src="horse.mp3" type="audio/mp3" autoplay preload="auto" /> </audio>
When I test it on Safari or Firefox, it does perform well, but when I compress it on the HTMLResources.zip file as required to be included on DPS, upload it, and then I call the HTML page using a button from the Overlay Creator, it doesn't play on the iPad, nor in the Desktop Viewer
Is something wrong about including these files on the DPS? Is DPS web browsing HTML5 fully-compatible?
Saludos,
Leo

It looks like there is a way for adobe to allow media to play on html articles without requiring human interaction... if they are using a UIWebView (which is likely), there is a setting they can set that allows media to play without requiring user interaction, it would be a great feature to allow this, or at least make it a setting we can set somewhere.
They need to set the mediaPlaybackRequiresUserAction property to NO on the UIWebView (it defaults to YES).
Here's a link to the documentation on this feature: https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIWebView_Class/Ref erence/Reference.html#//apple_ref/occ/instp/UIWebView/mediaPlaybackRequiresUserAction
Phone Gap and other products that aid the creation of HTML based Apps use this technique... any ideas on the best channel to get Adobe to implement it quickly?

System Audio Capture - Won't Work

Hello all,
I'm trying to capture my system audio and I cannot get Cp8 to do just that. I'm running the most recent version of Cp8 on my MBP OS X 10.9.5. I open a new video demo, with system audio selected, with or without a mic. The mic will capture just fine, no system audio.
I have a request to capture some Skype interview and Tuesday, any help will be great!
Thank you in advance

Hi there,
Have you tried configuring 'Soundflower' audio driver? . Please refer to the below link for more information.
http://helpx.adobe.com/captivate/kb/system-audio-disabled.html
Thanks,
Nimmy Sukumaran.

HTML5 tag audio not working in Safari

I've included a very simply HTML5 script in my webpage like this:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Player</title>
</head>
<body>
<audio
controls="controls"
autoplay="autoplay"
<div class="jive-quote">
<source src="http://www.mydomain.com/folder/filename.mp3" type="audio/mp3" />
<source src="http://www.mydomain.com/folder/filename.ogg" type="audio/ogg" />
</audio>
</body>
</html>
Works fine in Opera, Firefox, Chrome, on my IPhone...not in Safari on my MacBook and on the IPad.
All I see is a bar with a circle and 30 inside and the play button...nothing happening when I pudh the play button.
What am I doing wrong? Thanks for the help in advance!

Hi
make it audio/mpeg & things should be fine.
If not - have a play at http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5audioall

How to get audio clips to play at site but not actually download?

Would like person to be able to listen only to audio clips but not to be able to download clip to add to their iTunes library. In other words, am selling an audio product, and while I'd like people to be able to hear samples at my site (built with iweb), I don't want them to retain clip. Any suggestions on how to accomplish this would be much appreciated!

Stopping people from downloading anything that's published to the internet is virtually impossible.
I would recommend that you first edit your files so that you only have about a one minute clip online....
http://www.iwebformusicians.com/AudioFiles/Import.html
Dragging you files onto the iWeb page is not the best way to present them as a large percentage of PC users won't be able to play them. The Wordpress standalone flash player is still about the best way to play audio and you have to know how to get into the source code to be able to download the files....
http://www.iwebformusicians.com/MusicPlayers/FlashPlayers.html
Or use a flash jukebox....
http://www.iwebformusicians.com/Website-Music-Movies/Flash-Audio-Jukebox.html
For the increasing number of people using iPhone/iPad you can use this dual player....
http://www.iwebformusicians.com/Website-Music-Movies/Wordpress-Flash-HTML5-Audio .html
or have an alternative page using HTML5 players.....
http://www.iwebformusicians.com/Website-Music-Movies/HTML5-Audio-Player.html
"I may receive some form of compensation, financial or otherwise, from my recommendation or link."

Selecting multiple audio files

My site is for choir members to help with rehearsing at home and to listen to our past concerts. I have pages where there are upto 20 pieces of music all accesible by their own individual link. This is fine if you want to sit at the computer and choose 1 at a time but a bit of a pita if you want to hear the whole concert. I have been asked to supply the option to listen to all of the files concecutively. The pages I am working with are password protected but are exactly the same as this page. http://www.wigstonmalechoir.co.uk/wmvc/Magic.html
Can anyone offer me a solution please?

When you want to put a number of audio files on a web page you need to ensure that they don't all have to load with the web page.
There are a number of flash jukebox players around...
http://www.iwebformusicians.com/Website-Music-Players/XSPF-Playlist-Player.html
http://www.iwebformusicians.com/Website-Music-Players/Flash-Audio-Jukebox.html
The latest version of JW will also fallback to HTML5 for iOS devices...
http://www.iwebformusicians.com/Website-Music-Players/XML-Playlist.html
Here's some button players...
http://www.iwebformusicians.com/Website-Music-Players/Audio-Button-Player.html
... that can be used for multiple files...
http://www.iwebformusicians.com/Website-Music-Players/MP3-Button-Player.html
If you want HTML5 with flash fallback and to be able to add tracks so that they act like a playlist, you can use mediaelement like this...
http://www.iwebformusicians.com/Website-Music-Players/HTML5-Audio-In-A-Box.html
The mediaelement player is a really good solution for HTML5 since it presents a uniform control bar in all browsers on personal computers.

How to post an audio file in JSP or servlet

Hi,
I've loaded some rm files into the database. How do I retrieve and post it to the web using JSP or servlet page? How do I convert the ORDAUDIO to BLOB field? I went to the following example/demo:
http://www.oracle.com/technology/sample_code/products/intermedia/index.html
but didn't gain much help. Please provide me some sample codes using embeded tag. Thanks!
Regards,
Johnny

I''l try again.....
The response to your http page does not include media of any kind. The media is not part of your web response. It takes another request to get the media.
Your embed tag, image tag, object tag, anchor tag only reference the media data. Typically , in the case of an image, by a relative URL.
Your OrdAudio object can only provide the mimetype and other metadata when you are building your web page. You must have another endpoint to handle the delivery of binary media.
A simple servlet is typically used, Consider the following servlet. It delivers a HTML form, or Image media, depending on what the request parameter "what" is set to. If "what" is set to "form", it delivers an HTTP form that references this same servlet, except that in the image tag "what" is set to image, where the image object is fetched, and the binary media delivered (with the right mimetype). Just change the Image stuff to audio, the html image tag to an anchor or embed tag, and something like this should work for audio as well.
This is a bit better... , the <img src= is messed up, as are the <h1> tags...
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Types;
import java.sql.PreparedStatement;
import javax.servlet.ServletException;
import javax.servlet.ServletConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.naming.NamingException;
import oracle.jdbc.OracleResultSet;
import oracle.jdbc.pool.OracleConnectionPoolDataSource;
import oracle.jdbc.pool.OraclePooledConnection;
import oracle.jdbc.driver.OracleConnection;
import oracle.ord.im.OrdImage;
import oracle.ord.im.OrdHttpResponseHandler;
import oracle.ord.im.OrdMultipartWrapper;
public class deliveryServlet extends HttpServlet
    OracleConnection conn = null;
    String servletURL = null;
     * Servlet initialization method.
    public void init( ServletConfig config ) throws ServletException
        super.init(config);
     * Get a pooled database connection
    private void getPooledConnection() throws SQLException, NamingException
        javax.naming.InitialContext ic = new javax.naming.InitialContext();
        OracleConnectionPoolDataSource ds = (OracleConnectionPoolDataSource)
                ic.lookup("jdbc/pool/OracleMediaPoolDS");
        OraclePooledConnection pc = (OraclePooledConnection)
                                 ds.getPooledConnection();
        conn = (OracleConnection)pc.getConnection();
        // conn.setAutoCommit(false); // just query. No need for this
     * Process an HTTP GET request used to deliver an image column
    public void doGet( HttpServletRequest request,
                        HttpServletResponse response )
        throws ServletException, IOException
      String id = request.getParameter( "id" );
      String what = request.getParameter( "what" );
      if (!"image".equalsIgnoreCase(what)) what = "form"; // set a default
      if ("form".equalsIgnoreCase(what))
     String servletURL = request.getRequestURL().toString();
        try
       if (conn == null) getPooledConnection();
          PrintWriter out = response.getWriter();
          response.setContentType( "text/html" );
          out.println( "<HTML><BODY>" +
         "<H1>Display Images</H1>" +
            "<FORM action=\"" + servletURL + "\">" +
            " Enter Row ID:<INPUT type=\"text\" name=\"id\" /><BR/>");
          if (id != null)
            PreparedStatement stmt =
              conn.prepareStatement("select description, location, " +
                                           "thumb, image "+
                                  " from photos where id = ?" );
            stmt.setString( 1, id );
            OracleResultSet rset = (OracleResultSet)stmt.executeQuery();
            // Fetch the row from the result set.
            if ( rset.next() )
              // Get columns from query
           String location = rset.getString(1);
           String description = rset.getString(2);
              OrdImage thumb =
                 (OrdImage)rset.getORAData(3, OrdImage.getORADataFactory());
              OrdImage img =
                 (OrdImage)rset.getORAData(4, OrdImage.getORADataFactory());
              out.println("<B>Description: </B>" + description+ "<BR/>");
              out.println("<B>Location: </B>" + location+ "<BR/>");
              if (thumb != null && thumb.getMimeType().startsWith("image/"))
                String thmbWidthStr = thumb.getWidth() == 0 ? "" :
                                  "WIDTH=\"" + thumb.getWidth() + "\" ";
                String thmbHeightStr = thumb.getHeight() == 0 ? "" :
                                  "HEIGHT=\"" + thumb.getHeight() + "\" ";
                out.println("<B>Thumbnail: </B>" +
                            "<IMG SRC=\"" + servletURL + "?id=" + id +
                                     "&what=image&col=thumb\" " +
                                     thmbWidthStr +
                                     thmbHeightStr +
                             "/>" );
              if (img != null && img.getMimeType().startsWith("image/"))
                String imgWidthStr = img.getWidth() == 0 ? "" :
                                  "WIDTH=\"" + img.getWidth() + "\" ";
                String imgHeightStr = img.getHeight() == 0 ? "" :
                                  "HEIGHT=\"" + img.getHeight() + "\" ";
                out.println("<B>Image: </B>" +
                            "<IMG SRC=\"" + servletURL + "?id=" + id +
                                     "&what=image&col=image\" " +
                                     imgWidthStr +
                                     imgHeightStr +
                             "/>" );
            else
              // Print not found
              out.println("<H2>Row with ID\"" + id + "\" Not Found</H2><BR/>");
          out.println("</FORM></BODY></HTML>");
        catch (Exception e)
       conn = null; // Get another connection next time.
          throw new ServletException(e);
      else
        try
       if (conn == null) getPooledConnection();
          String col = request.getParameter("col");
          if (col == null) col = "thumb"; // default to the thumbnail column
          PreparedStatement stmt =
            conn.prepareStatement( "select " + col +
                                   " from photos where id = ? " );
          stmt.setString( 1, id );
          OracleResultSet rset = (OracleResultSet)stmt.executeQuery();
          // Fetch the row from the result set.
          if ( rset.next() )
            // Get the OrdImage object from the result set.
            OrdImage img =
                 (OrdImage)rset.getORAData(1, OrdImage.getORADataFactory());
            // Create an OrdHttpResponseHandler object, then use it to retrieve
            // the image from the database and deliver it to the browser.
            OrdHttpResponseHandler handler =
                new OrdHttpResponseHandler( request, response );
            handler.sendImage( img );
          else
            // Row not found, return a suitable error.
            response.setStatus( response.SC_NOT_FOUND );
          // Close the result-set and the statement.
          rset.close();
          stmt.close();
        catch (Exception e)
       conn = null; // Get another connection next time.
          throw new ServletException(e);

Does iWeb utilize html 5?

Pardon my ignorance, I'm relatively new to the web design side of things. Just wondering if iWeb utilizes html 5 technology? Apple seems to be a big proponent of it and yet, to the best of my knowledge iWeb doesn't generate html 5 for its websites. I'd be interested in any knowledge or thoughts any of you can pass along on this topic.
Cheers,
Pendimar

HTML5 is very much in its infancy. Its the browsers that need to be updated before it will be much use and universally adopted.
Have a look at how the various browsers differ in the way in which they display and audio player...
http://www.iwebformusicians.com/Website-Music-Movies/HTML5-Audio-Player.html
IE up to and including V8 don't support HTML5. V9 beta is the first to do so.
When around 60% of PC users still use IE V 6 &7, how can we move on?

How to make an audio file on Dreamweaver not auto play?

hi,
ive been trying to make my audio file on dreamweaver not play when the webpage is opened.
i have tired the 'autoplay, false' however this dosent seem to work for me. im using Dreamweaver CS6
im hoping for some help as this is becoming frustrating!
and i am using a music file which has been downloaded!

At a minimum, you need MP3 and OGG audio files. If you don't have them, use the online converter below: http://media.io/
With an HTML5 doc type, your code should look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Audio Demo</title>

</head>
<body>
<p>This works in all modern browsers. </p>
<audio controls>
<source src="path/yourSong.ogg" type="audio/ogg">
<source src="path/yourSong.mp3" type="audio/mp3">
<p>Your browser doesn't support audio.</p>
</audio>
</body>
</html>
Nancy O.

Html5 audio duration problem

Hi guys,
I'm building a website using the HTML5 audio control. I'm having quite a trouble with certain mp3 files: it simply doesn't seek correctly when moving the slider. Specifically, I can move the slider to the desired position, but the sound jumps to an incorrect time. Therefore, when the slider comes to the end, the song is already playing, and the current time keeps incrementing.
In addition, the track length (it's supposed to be a fixed value, loaded from the metadata) has a strange behavior given that point: it starts incrementing as the current time...
I found no differences between the files that work correctly and the files that don't, but I suspect is a browser support related issue, since I didn't experience that problem using Chrome.
Just in case, you can download the file here:
http://www.4shared.com/mp3/JzSPjx3Qba/Quartet_12_Mov_1.html
And this is the test code I'm using:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<audio controls="controls">
<source src="Quartet 12 Mov 1.mp3">
</audio>
</body>
</html>
Thanks in advance!

hello, if you think it's a browser issue, you can file a bug report at bugzilla.mozilla.org - there it should get the attention of mozilla's developers (whereas this forum is primarily staffed by volunteers and firefox users like you helping out).
thank you!

MP3 audio file plays well in some browsers, but not all

I have inserted a media file (MP3 audio file) on a web page to play when clicked. The play bar shows up and plays perfectly in Chrome just the way I want it. In Explorer the play bar is HUGE and it plays, but repositions itself on the page due to it's large size. In Safari or Opera the play bar either doesn't play anything or doesn't even show upon the page. Does anyone have a ny idea what's going on or have a solution?
http://www.starcatcluster.com/revue.html

#1 You must use an HTML5 doc type. Your doc type is XHTML which doesn't support <audio> tags.
#2 To work in all browsers, you need to include an alternate file type -- either OGG or WMA. Opera & pre-FF21 browsers do not support MP3/mpeg files.
http://audio.online-convert.com/convert-to-ogg
#3 Don't use folder/filenames with spaces on the web. Rename your media files to Mixdown_with_Vocalists.mp3 (no spaces).
#4 Paste this code into a new, blank document. It should work in all devices:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>

</head>
<body>
<audio controls="controls" title="Listen to Litterbox Lounge song">
      <source src="Mixdown_with_Vocalists.mp3" type="audio/mpeg" />
      <source src="Mixdown_with_Vocalists.ogg" type="audio/ogg" />
If you see this, you're using an outdated browser that doesn't support audio.
    </audio>
</body>
</html>

Audio file sounds like Donald Duck on helium

I made a jingle in GarageBand. Then I dictated an audio file on my iPod with iTalk which hot-synced into iTunes. I then dragged the dictated audio file from iTunes to GB to try to mix the jingle and the audio together, but after my audio file is imported, it runs way too fast. I looked here for an answer: http://thehangtime.com/gb/gbfaq2.html#toofast - but it didn't work.
What do I do? GB 2.0.1 iTunes 4.9 iPod 4th gen.
TIA
JV

Try this:
1. Download Sound Studio at this link: http://www.apple.com/downloads/macosx/audio/soundstudio.html
2. Once you've installed it, open the program, and under the FILE menu select IMPORT WITH QUICKTIME to load your vocal audio file.
3. Once it has loaded properly, pull down the FILE menu and select SAVE AS
4. Rename the file, and under the FORMAT pull-down menu, select WINDOWS WAVE
5. Take the file from your desktop and drag it into Garageband. This should eliminate the "sped-up" effect and it should play at normal speed and pitch.
Let me know if that works.

Apply Scroll Effect Opacity To An Audio File

I'm building a fairly simple one page scrolling site but I want a different audio file to fade up when user scrolls down to each new page, with the old audio file fading out creating a sort of cross-fade between the pages audio content. Is there a way to achieve this using Scroll effects opacity? I've got a simple audio embed html tag for the mp3's but perhaps there is a better way to do this that would allow for an easy application of the scroll effects opacity effect. Would love to figure out a way to do this without any coding. Happy to purchase a widget if anyone knows of any for a similar effect. Thanks for any help!
Sean

You need to break up your presentation into one presentation per nominee with a hyperlink to the next presentation set on the last slide. This will allow you to insert the audio voice over into the presentation to play across the multiple slides for the nominee. Place the audio using the Keynote Inspector > Presentation > Audio and drag the voice over file into the soundtrack well.
To set the hyperlink, you need to place an object on the last slide of each nominee set that when clicked will hyperlink to the next Keynote file. With the object selected use the Keynote Inspector > Hyperlink > Enable As A Hyperlink (ON) > Link To: Keynote Slideshow (in pull down menu) > navigate to the next file and select it.
Note: All Keynote presentation files should be opened prior to starting the overall presentation so that they start when the link is clicked, otherwise you will see an attempt to open a file, but the show will stall.
The object can be "invisible" with no fill and no stroke, but it can be a hard target to find on the fly. I would suggest placing it over a logo or other repeating graphic element.

Audio in HTML

Similar Messages

Maybe you are looking for