Databases
StackOverflow2013
Postsdbo
POhow to stop all audio players playing if one player is selected?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to stop all audio players playing if one player is selected?
    text
    copied!<p>I have a demo here: <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/Text20.php" rel="nofollow">demonstration</a></p> <p>In the demo I have 2 questions and in those questions it contains jplayer audio players where it plays audio which belongs to each question.</p> <p>So in demo question 1 has 2 pieces of audio, hence why there are 2 audio players for question 1, one audio file per player. In question 2 it has one audio player as it only contains one audio file. Now code below displays this where if a question has no audio file, then display a blank else display audio players for each audio file.</p> <p>Only problem is that if you click on an audio player, then all audio players are playing, playing their files. All I want is that if a user uses a audio player, only the audio file that belongs to that audio player should play and that is it. This is same for the other controls, if user uses a control in an audio player, then it only control that audio player only.</p> <p>But what do I need to do in order to fix this?</p> <p>Below is code:</p> <pre><code>&lt;?php foreach ($arrQuestionId as $key=&gt;$question) { ?&gt; &lt;div class='lt-container'&gt; &lt;p&gt;&lt;?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?&gt;&lt;/p&gt; &lt;?php //start:procedure audio $aud_result = ''; if(empty($arrAudioFile[$key])){ $aud_result = '&amp;nbsp;'; }else{ $j = 0; foreach ($arrAudioFile[$key] as $a) { $info = pathinfo('AudioFiles/'.$a); ?&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#jquery_jplayer_1-&lt;?php echo $key.'-'.$j; ?&gt;").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { &lt;?php echo $info['extension'];?&gt;: "&lt;?php echo "AudioFiles/".$a; ?&gt;" }); }, solution:"flash,html", swfPath: "jquery", supplied: "&lt;?php echo $info['extension'];?&gt;" }); }); &lt;/script&gt; &lt;div id="jquery_jplayer_1-&lt;?php echo $key.'-'.$j; ?&gt;" class="jp-jplayer"&gt;&lt;/div&gt; &lt;div id="jp_container_1" class="jp-audio"&gt; &lt;div class="jp-type-single"&gt; &lt;div class="jp-gui jp-interface"&gt; &lt;ul class="jp-controls"&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-play" tabindex="1"&gt;play&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-pause" tabindex="1"&gt;pause&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-stop" tabindex="1"&gt;stop&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-mute" tabindex="1" title="mute"&gt;mute&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"&gt;unmute&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume"&gt;max volume&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="jp-progress"&gt; &lt;div class="jp-seek-bar"&gt; &lt;div class="jp-play-bar"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="jp-volume-bar"&gt; &lt;div class="jp-volume-bar-value"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="jp-time-holder"&gt; &lt;div class="jp-current-time"&gt;&lt;/div&gt; &lt;div class="jp-duration"&gt;&lt;/div&gt; &lt;ul class="jp-toggles"&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat"&gt;repeat&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off"&gt;repeat off&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php $j++; } } //end:procedure audio ?&gt; &lt;/div&gt; &lt;?php } ?&gt; </code></pre> <p>UPDATE:</p> <pre><code> $("#jquery_jplayer_1-&lt;?php echo $key.'-'.$j; ?&gt;").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { &lt;?php echo $info['extension'];?&gt;: "&lt;?php echo "AudioFiles/".$a; ?&gt;" }); }, $(this).bind($.jPlayer.event.play, function() { //ERROR HERE $(this).jPlayer("pauseOthers"); }, solution:"flash,html", swfPath: "jquery", supplied: "&lt;?php echo $info['extension'];?&gt;" }); </code></pre> <p>Code above giving me this error: missing : after property list</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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