Audio not playing using HTML 5 in Windows 8 Phone

Question

I am trying to make an audio player using HTML 5 project template. I am using the following HTML code :

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <title>Windows Phone</title>
    </head>
    <body>
        <div>
            <p>Audio Player</p>
        </div>
        <div id="page-title">
            <p>Play Audio</p>
            <audio controls="">
            <source src="horse.ogg" type="audio/ogg">
             Your browser does not support the audio element.
            </audio>
        </div>
    </body>

</html>

I picked up this code from here, I have added the "horse.ogg" to the solution explorer as shown in the screenshot below...

enter image description here

But when I run this appication I get the following output, it reads

Invalid Source

But when I open the same html using a browser I am able to play the file properly.

enter image description here

What could be the problem ?

Is there a better and easier way in which I could play audio files which I will add to the solution explorer and play using HTML 5 ? I am planning to add 10-15 small and funny audio clips and the app will allow user to select it and play it using HTML 5.

Please share your thoughts on this.

Ian Devlin Ian Devlin · Accepted Answer · 2013-01-25T09:37:36

As the error message says, it's an invalid source.

Internet Explorer 10 doesn't support Ogg audio files, but MP3 files. Convert your Ogg to an MP3 and it should work fine.

<audio controls>
   <source src="horse.mp3" type="audio/mp3">
</audio>

Also, if you're only providing one source you can use the src attribute of the audio element:

<audio src="horse.mp3" controls></audio>

But this is only really recommended if you are targetting one particular type of browser only.

Audio not playing using HTML 5 in Windows 8 Phone

1 Answers