Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    <audio> element is not working

    when i'm trying to use that:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Adding HTML5 Audio</title>
    </head>
    <body>
    <audio src="audio/test-audio.ogg"
    controls autoplay>
    <p>This browser does not support our audio
    format.</p>
    </audio>
    </body>
    </html>


    in firefox i'm getting the player for half second and them nothing.

    chrome does something similar.

    i don't really know why is that. help..

    have a great night

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    You have it incorrectly typed.

    Code:
    <audio controls>
      <source src="yourfile.ogg" type="audio/ogg">
    Your browser does not support the audio element.
    </audio>
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    same results

    why is that?

  • #4
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Which browser are you using? I know sometimes Firefox has issues with the autoplay mechanic.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #5
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    firefox......

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by thbz View Post
    in firefox i'm getting the player for half second and them nothing.

    chrome does something similar.

    i don't really know why is that. help..
    Make sure you supply a type attribute with the relevant audio codec specified in the codecs parameter. For Ogg Vorbis, you would use audio/ogg; codecs=vorbis.

    Make sure your server is also configured to send a content-type: audio/ogg; codecs=vorbis header (with the relevant codec substituted) for the Ogg file as well. If you're using Apache .htaccess files, this is easiest done, by using *.oga file extensions and then specifying the following in your .htaccess file (again, with the relevant codec substituted):

    Code:
    AddType "audio/ogg; codecs=vorbis" .oga
    Edit: audio/ogg; codecs=vorbis should have been quoted. Not quoting it causes Apache to send out a malformed header (audio/ogg;).

    Live Example: https://patrick.dark.name/web.dev/de...io.playback.1/

    Live Example Code:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <?xml-stylesheet type="application/xml" href="../style.sheets/boilerplate.xslt"?>
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:p="https://patrick.dark.name/">
    	<head>
    		<title>Demo for CodingForums.com Thread 305367: <![CDATA[<audio>]]> element is not working</title>
    		<p:title>Demo for CodingForums.com Thread 305367: <cite><code><![CDATA[<audio>]]></code> element is not working</cite></p:title>
    	</head>
    	<body>
    		<main id="content">
    			<section id="description">
    				<h1>Demo Description</h1>
    				<p>This demo demonstrates how to play Ogg Vorbis audio with MP3 audio fallback using an <code>audio</code> element.</p>
    				<p class="note">Note: In Windows Internet Explorer 11, the player won’t materialize due to a bug apparently caused by the <abbr title="Extensible Stylesheet Language Transformations">XSLT</abbr> transformation. The audio can be played in that browser by right‐clicking the player area in that browser and selecting <q class="menu.command">Play</q> from the shortcut menu that appears.</p>
    			</section>
    			<section id="demo">
    				<h1>Demo</h1>
    				<figure>
    					<audio controls="">
    						<source type="audio/ogg; codecs=vorbis" src="audio/air.on.the.g.string.oga"/>
    						<source type="audio/mpeg" src="audio/air.on.the.g.string.mp3"/>
    					</audio>
    					<figcaption><cite>Air on the G String</cite> by August Wilhelmj</figcaption>
    				</figure>
    				<p>The audio was obtained from <a href="https://archive.org/details/Bach-airOnTheGString">https://archive.org/details/Bach-airOnTheGString</a></p>
    			</section>
    		</main>
    	</body>
    </html>
    Also worth noting that there's a bug in Firefox 25 Beta 10 where the audio doesn't play correctly when autoplay is enabled. Pressing pause doesn't pause the audio and pressing play again causes the audio to play again over the audio that didn't get paused. Closing the tab doesn't stop the audio. Closing the browser to force the audio off causes the browser to hang in the background. That's why I didn't put the song on autoplay in the demo. I'm not sure if this bug is in the release version (24) or not.
    Last edited by Arbitrator; 10-26-2013 at 08:10 PM. Reason: See the post.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hi and thanks

    1. my file is in ogg and not oga.
    2. i'm ff 24
    3. do you mean editing the mime types? i did it and deleted it because it didn't worked out

    4. should i maybe use other piece of software for converting into webm other than MIRO?

    the player is appearing with your code in ogg settings but not playing the file.

    i also don't know about other program to convert to ogg/oga.

    would glad for more assistance.........

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by thbz View Post
    1. my file is in ogg and not oga.
    *.ogg and *.oga are interchangeable and both are defined as part of the Ogg Media Types standard. Simply rename the file. *.oga and *.ogv are more specific than *.ogg and should be used in place of the latter anyway, IMO.

    Quote Originally Posted by thbz View Post
    3. do you mean editing the mime types? i did it and deleted it because it didn't worked out
    You can specify a MIME type using a type attribute in HTML, but the controlling MIME type is specified by your server in an HTTP response. So you need to also make sure the MIME types sent by your server are correct too.

    Quote Originally Posted by thbz View Post
    4. should i maybe use other piece of software for converting into webm other than MIRO?
    I thought this question was about Ogg?

    Quote Originally Posted by thbz View Post
    the player is appearing with your code in ogg settings but not playing the file.
    Strange. It's working for me in four browsers.

    Quote Originally Posted by thbz View Post
    i also don't know about other program to convert to ogg/oga.
    I use dBpoweramp for audio conversions. (It's payware with a free trial.) If you want to try that, you can go to http://www.dbpoweramp.com/. There's an Ogg Vorbis codec you can add to it after installation at http://www.dbpoweramp.com/codec-central.htm.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    cool bro

    let me try to save ogg audio with another software and then also try the .oga

    i did meant ogg and not webm

    i will also retry the mime thing with ogg and oga and also ogv

    but once again what exactly should i specify besides the extensions of files?

    my fatcow mime page loads so slow so i really need the the to put there once

  • #10
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    cool,

    i've used the software you've mentioned and now it's ticking

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by thbz View Post
    but once again what exactly should i specify besides the extensions of files?
    Google indicates that FatCow uses Apache. If they support .htaccess files (they probably do) you would simply create one such file in your root directory with this line:

    Code:
    AddType "audio/ogg; codecs=vorbis" .oga
    Then, of course, you specify the same in your HTML as you call the audio:

    Code:
    <audio controls="">
    	<source type="audio/ogg; codecs=vorbis" src="audio.oga"/>
    </audio>
    Quote Originally Posted by thbz View Post
    cool,

    i've used the software you've mentioned and now it's ticking
    Sounds good.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    thbz (10-29-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •