Rectangle 27 0

The way you have it written it should result in some HTML like:

If it's going to be hidden already, why not just leave it someplace on the page and simply trigger the audio to play when the button is clicked. Set autostart="false" and then use JS/JQuery to play the mp4 when the button is clicked.

<a style='font-family:Arial,Helvetica,sans-serif;font-size:200%;' id="ui-btn-text" onclick="playSound('ui-btn-sound');" href="#" data-ajax="false" data-transition="slide">
</a>
<embed src="image/button.mp4" hidden="true" autostart="false" loop="false" id="ui-btn-sound" />
function playSound(id) {
    var audioFile = document.getElementById(id);
    audioFile.Play();
    return false;
}

I personally would suggest using HTML5 audio tag and fall back to an embedded option if needed.

<audio controls>
    <source src="image/button.mp4" type="audio/mp4">
    <!-- Fail Over -->
    <embed src="image/button.mp4" hidden="true" autostart="false" loop="false" id="ui-btn-sound" />
    <a href="" onclick="playSound('ui-btn-sound')">Play</a>
</audio>

The audio tag also has lots of ways to control it's look and function via JS/JQuery. You might want to look into things like audio.canPlayType('audio/mp4');. Here is an older example, someone challenged me to make a piano that did not have lag between each note and allowed other notes to be stopped when a new note was played: http://www.yrmailfrom.me/projects/html5/piano.php

The audio file plays when the page is loaded, but when i clicked on the link it does not, am i doing something wrong?

Been testing with FireFox, Chrome, Dolphin, and Safari and its work as expected in all of them, minor issues in Chrome calculating the Duration for some reason. Can you clarify the browser and version you are using. Feel free to PM me too.

+1 for the nice player, even though the "progress bar" does not work :P

Which browser do you not see it working in @dualed It works for me. And thanks for the +1

Firefox and Chrome (both current stable). In Firefox the numeric display left of the progress bar shows a "NaN" after moving it. Also I get an error in the log that an audio file is not supported (Specified "type" attribute of "audio/mpeg" is not supported. Load of media resource songs/mp3/Spirit_Of_Life.mp3 failed.), not sure about that as I do hear audio playing. And an error I was not able to trace "Empty string passed to getElementById()." in jquery.min...js

php - mobile jquery onclick does not play audio file? - Stack Overflow

php javascript jquery-mobile onclick
Rectangle 27 0

You can use this function to check if the audio is playing:

function isPlaying(playerId) {
    var player = document.getElementById(playerId);
    return !player.paused && !player.ended && 0 < player.currentTime;
}

You could use this in a if statement.

if (isPlaying(...)) {..Pause..} else {..Play..}
if(document.getElementById('background_audio').muted) {
    document.getElementById('background_audio').muted = true;
} else {
    document.getElementById('background_audio').muted = false;
}

BUT, I did try...everything you mentioned. Here's the fiddle: jsfiddle.net/y8qcyseb

jquery - Adding OnClick Stop to Audio - Stack Overflow

jquery html5 audio onclick toggle
Rectangle 27 0

This won't COMPLETELY answer your question/issue, but have you checked out the jQuery plugin jPlayer?

Looking at your question further, and listening to the sound sample you provided, it looks like you are trying to create a metronome of sorts? If you're using JS, it's going to be hard to make it very accurate. Even using setInterval won't guarantee as exact an interval between sounds/clicks as you'd probably want.

Consider something server-side that will actually build a file on-the-fly and stream it to the browser.

Well yes :) that's in the right direction. I see accuracy would be too difficult to accomplish with jQuery

audio - jQuery onclick play a sound and speed/slow it down - Stack Ove...

jquery audio performance onclick intervals
Rectangle 27 0

Somewhere in your HTML:

<button id="button1Id">Button 1</button>
$("#button1Id").click( function (event) {
    //Prevent the default button action (I suppose the default click sound is,
    //if it exists on thedevice, is removed by this)
    e.preventDefault(event);

    //TODO: Insert code for audio file playback here

    $.mobile.changePage("destination.html");
}

Then you could just repeat this code for all different buttons. I didn't include code for audio playback since it's not clear in the question if you need help with that. There's several ways to achieve it, you could for instance use: https://developer.mozilla.org/en-US/docs/HTML/Element/Audio

html5 audio - jquery mobile playing sound onclick - Stack Overflow

jquery-mobile html5-audio
Rectangle 27 0

Here is the logic for shuffle button. You'll have to write in the code to the get the track to play but it shouldn't be that difficult. I added a class to the ul called "tracks".

$(".shufflebutton").click(function() {
        var trackCount = $(".tracks li").length;
        console.log('trackCount:' + trackCount);
         /* Pick random number between 1 and trackCount */
        var randomNum = Math.ceil(Math.random()*trackCount); 
        console.log("randomNum:" + randomNum);     
      });

Thanks for taking the time to help me. I didn't notice any changes in the fiddle you provided me. I tried to implement the code you gave me but no dice. Take a look. jsfiddle.net/F8w8r/2

I made a few minor updates. Check out the updated .shufflebutton logic: jsfiddle.net/F8w8r/3

javascript - HTML5/jQuery audio shuffle onClick - Stack Overflow

javascript jquery html5 random html5-audio
Rectangle 27 0

jQuery has some great audio plugins. It also means you can get rid of nasty onclick attributes, and so keep all your javascript between the script tags.

<script>

@Elusive - depends - no point in making another connection to the server for 5 lines of script. However, there comes a point, when yes, putting it in a separate file is definitely the way to go :)

browser - Play sound using javascript in safari - Stack Overflow

javascript browser audio embed playsound
Rectangle 27 0

You are adding two click handlers to same jQuery element, so on a single click two handlers will be called.

You have to add an if that verify if the sound was muted.

When you will click on the button the sound will be muted or un-muted with fadeIn.

<div style="bottom:0; position:absolute; height:32px; width:100%;">
    <button id="mute">Mute sound</button>
    <audio id="background_audio"  src="http://www.noiseaddicts.com/samples/2541.mp3" autoplay="autoplay"></audio>
</div>
$(document).ready(function(){
    var backAudio = $('#background_audio');

    var muted = false;

    $('#mute').click(function(){
        var button = $(this);
        if (!muted) {
            button.attr("disabled", "");
            backAudio.animate({volume: 0}, 1000, function () {
                muted = true;
                button.removeAttr("disabled", "");
                button.text("Unmute sound");
            });
        }
        else {
            button.attr("disabled", "");
            backAudio.animate({volume: 1}, 1000, function () {
                muted = false;
                button.removeAttr("disabled", "");
                button.text("Mute sound");
            });
        }
    });
});

I don't use an audio plugin. I tried the code you provided, and it only faded the audio out once the #background_audio div was clicked, but when it was clicked again, the audio did not fade back in and resume playing.

Are you sure that you've updated the script into page? Clear the cache, please.

Yes I am sure (otherwise your code wouldn't have behaved differently than mine).

jsfiddle here: jsfiddle.net/X4cu9 For some reason, jsfiddle isn't closing the <audio> and <div> tags properly... so it's not even muting the audio the way it does when I test it on my server with your code.

fadein - jQuery audio fade out and pause, onclick fade in audio and re...

jquery fadein fadeout
Rectangle 27 0

Somewhere in your HTML:

<button id="button1Id">Button 1</button>
$("#button1Id").click( function (event) {
    //Prevent the default button action (I suppose the default click sound is,
    //if it exists on thedevice, is removed by this)
    e.preventDefault(event);

    //TODO: Insert code for audio file playback here

    $.mobile.changePage("destination.html");
}

Then you could just repeat this code for all different buttons. I didn't include code for audio playback since it's not clear in the question if you need help with that. There's several ways to achieve it, you could for instance use: https://developer.mozilla.org/en-US/docs/HTML/Element/Audio

html5 audio - jquery mobile playing sound onclick - Stack Overflow

jquery-mobile html5-audio
Rectangle 27 0

Somewhere in your HTML:

<button id="button1Id">Button 1</button>
$("#button1Id").click( function (event) {
    //Prevent the default button action (I suppose the default click sound is,
    //if it exists on thedevice, is removed by this)
    e.preventDefault(event);

    //TODO: Insert code for audio file playback here

    $.mobile.changePage("destination.html");
}

Then you could just repeat this code for all different buttons. I didn't include code for audio playback since it's not clear in the question if you need help with that. There's several ways to achieve it, you could for instance use: https://developer.mozilla.org/en-US/docs/HTML/Element/Audio

html5 audio - jquery mobile playing sound onclick - Stack Overflow

jquery-mobile html5-audio