locked
How to play a sound on clicking a button in Windows8 Metro HTML 5 app?

    Question

  • I have a button and I want to play an audio file upon clicking on the button. Below is the script I am using. But it's not working.Beat.mp3 file is added to my current project.

    in javascript:

    varMusicMore = newAudio("/..Sounds/Beat.mp3");

    HTML 5 :

    <inputtype="button"id="btnMore"  name="More"value="More">

    in JavaScript:

    function

    MoreButtonClicked() {

            MusicMore.play();

        }

    document.getElementById(

    "btnMore").addEventListener("click", MoreButtonClicked);



    • Edited by Krrrishna Tuesday, July 24, 2012 4:09 PM
    Tuesday, July 24, 2012 1:11 PM

Answers

  • A few questions, some of which are obvious but good to ask:

    1. Do other sounds play fine on your system (i.e., check that your audio hardware is working and that volume is not muted or too low, speakers are plugged in, etc.)
    2. If you play the sound outside the app, say in Windows Media Player, do you hear anything? (i.e. is the file a real sound?)
    3. Have you tried setting MusicMore.volume = 1; to make sure it's on full?
    4. Have you tried using a different audio file that you know plays properly in something like Windows Media Player (say, one from a sample app like HTML media playback sample)
    5. Have you tried the same app on another device to make sure there's nothing odd with your configuration?

    Otherwise the JavaScript code is correct so far as I can tell.

    • Marked as answer by Krrrishna Thursday, July 26, 2012 6:03 AM
    Wednesday, July 25, 2012 3:32 PM
  • Thanks Kraig.

    In Simulator I can't hear the sound.But when I select local machine in debug then in that I can hear that.

    • Marked as answer by Krrrishna Thursday, July 26, 2012 6:03 AM
    Thursday, July 26, 2012 6:02 AM

All replies

  • Creating a new Audio object and calling play is the way to do it. However, the URL you show that you're passing to new Audio doesn't seem well-formed ("/..Sounds/Beat.mp3"). Have you confirmed in a debugger that MusicMore is actually being initialized properly?

    Tuesday, July 24, 2012 4:22 PM
  • It's a typo error.I had"../Sounds/Beat.mp3" only.

    How do i confirm if it's start playing the track(.mp3) or not ? And how do i know much it has played so far ?

    Tuesday, July 24, 2012 4:43 PM
  • You can tell what's happening with the audio object using its various events. Refer to http://www.w3.org/TR/html5/media-elements.html#event-definitions for that list. The timeupdate event in particular is what you need to see how much is playing.

    I'm wondering also about your URL still. If the HTML page that's loading the audio is located in the root of your app package--and this includes a default.html into which you're loading page controls, even if those pages are in other folders--then ../ is not a valid URL since it refers to a location outside the app package. Generally speaking, it's best to start relative URLs with just / which refers to the package root.

    .Kraig

    Tuesday, July 24, 2012 5:23 PM
  • I have added the "controls" attribute to the audio element to check if its really playing the file.I can see the audioplaying, and also the slider is moving.But can't hear the sound.
    • Edited by Krrrishna Wednesday, July 25, 2012 2:16 PM
    Wednesday, July 25, 2012 10:38 AM
  • A few questions, some of which are obvious but good to ask:

    1. Do other sounds play fine on your system (i.e., check that your audio hardware is working and that volume is not muted or too low, speakers are plugged in, etc.)
    2. If you play the sound outside the app, say in Windows Media Player, do you hear anything? (i.e. is the file a real sound?)
    3. Have you tried setting MusicMore.volume = 1; to make sure it's on full?
    4. Have you tried using a different audio file that you know plays properly in something like Windows Media Player (say, one from a sample app like HTML media playback sample)
    5. Have you tried the same app on another device to make sure there's nothing odd with your configuration?

    Otherwise the JavaScript code is correct so far as I can tell.

    • Marked as answer by Krrrishna Thursday, July 26, 2012 6:03 AM
    Wednesday, July 25, 2012 3:32 PM
  • Thanks Kraig.

    In Simulator I can't hear the sound.But when I select local machine in debug then in that I can hear that.

    • Marked as answer by Krrrishna Thursday, July 26, 2012 6:03 AM
    Thursday, July 26, 2012 6:02 AM