Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript function to play audio file
    primarykey
    data
    text
    <p>I would like a clean way to to write a JavaScript function that fires at a specific click to a <code>#div</code> element and triggers a sound file, without looping. Is there anyway to write a function that grabs a sound file, plays it and then stops. It is going to be apart of a large array of functions that exist per click, and are assigned to a custom number of clicks done by the user; at one specific <code>#main_div</code> button.</p> <p>Currently I have a solution that displays a 'Play Button' using <code>.show .hide</code> within a function. </p> <p><strong>JS:</strong></p> <pre><code>function function8() { $("#area1").hide(0).delay(1500).show(0); $("#area2").hide(0).delay(1500).show(0); $("#sound1").show(0).delay(1500).hide(0); // This one // I would like the above to directly play the sound when fired. Not overlay a new play button. </code></pre> <p>Mark-Up:</p> <pre><code>&lt;div id="sound1"&gt;&lt;div&gt; &lt;audio id="id1" src="01.mp3"&gt;&lt;/audio&gt; &lt;button onClick="document.getElementById("id1").play()"&gt;Play&lt;/button&gt; &lt;button onClick="document.getElementById("id1").pause()"&gt;Stop&lt;/button&gt; &lt;/div&gt;&lt;/div&gt; </code></pre> <p>But this requires an extra 'Click' to play; and also I don't want a button specific to this audio play. I would like this to exist via the main <code>#main_div</code> box button; where all of the functions will occur when clicked on; essentially I want; say Click = 3 to 'Play Sound File' automatically without requiring an extra step.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload