Develop Reference

using "ontouchstart" or "onclick" depending on device for custom audio dial

I've create a website whereby users can use various audio dials to create their own unique audio sound (ie a mix of rain, crackling fire etc). My site is linked below:
http://immerseinnature.com/
I'm unable to get the audio to work on mobile / touch screen devices. I think this is stemming from my use of onclick="play()" in the html input tag. When i replace onclick with ontouchstart, the audio dial works on touch screen devices, but not on desktop.
Does anyone know if there is a way i could get onclick and ontouchstart to work simultaneously?
thanks
HMTL
<li>
<div class="audio_buttons">
<img src="images/fire.png" class="audio-icons " id="fire-icon">
<input type="range" oninput="setVolume(this)" id='volume1' min=0 max=1 step=0.01 value='0' onclick="play()">
<audio loop id="cs_audio" controls style="display:none">
<source src="audio/fire_loop.mp3" type="audio/mp3">
</audio>
</div>
</li>
JS
var audio_file_1;
var volume1;
function init() {
audio_file_1 = document.getElementById("cs_audio");
volume1 = document.getElementById("volume1");
audio_file_1.play();
}
function setVolume() {
var audio_file_1 = document.getElementById("cs_audio");
audio_file_1.volume = document.getElementById("volume1").value;
}
function play() {
var audio = document.getElementById("cs_audio");
audio.play();
}

const event = "ontouchstart" in window ? "touchstart" : "onclick";
document.getElementById("volume1").addEventListener(event, () => play());
In JavaScript ontouchstart will be in the window object when using a touch screen device, using this you can listen for the right event.

Add an audio player, Enable and Disable tab

here in this blog I found an interesting effect that I put into practice programming using the footer attribute. The effect is to slide the footer as if it were like a tab for which to program I worked.
Now the problem is if I add an audio player above the tab, when I want to start the audio playback, the tab slides to click on my player for example click on PLAY or stop, what I want is that only this Activated the FOOTER tab to click on it to slide, instead the audio player that does not perform any action in sliding as a bullet and only play when I click on it.
Here the codes:
HTML
<span class="fTab">
<!- - AUDIO- - >
<section id="repro">
<audio controls="controls" autoplay>
<source src="music.mp3" type="audio/mpeg" />
</audio>
</section>
***CONTENT***
</span>
<footer>
<section class="credit">
<div id="slideout_inner">
**CONTENT**
</div>
</section>
</footer>
JAVASCRIPT
jQuery(function($){
$('.fTab').on('click', function(){
$(this).toggleClass('active');
});
})
The css is long because it is not very important. The important thing is the javascript since it is the one that will execute the effect of sliding the FOOTER.
I hope you understand what I say, I hope your help from everyone. Thank you

You can use stopPropagation. If #repro element is clicked then the $(this).toggleClass('active'); won't be fired.
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed.
$("#repro").click(function(event){
event.stopPropagation();
});

Why am I receiving a different play button shape in ipad air than in desktop?

So here's the shape I receive (there is supposed to be only a play button not another triangular play shape above it). Any idea why this happens when I browse it in ipad air?
And this is what I should receive (say in desktop):
Here's the code I've used:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
var aud = document.getElementById('audio2');
this.questionclick = function(event,element){
if((element.type == "button") && (element.name == "play"))
{
aud.play();
// remove the element
element.parentNode.removeChild(element);
// or set it to disabled, what you like
element.disabled = true;
}
}
});
and HTML is:
Now that you know how the auditory stories will sound, you are ready to listen to and comprehend the two auditory stories in this study. The first auditory story is titled, “The Honey Gatherer’s Three Sons.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story.
<div>
<p> </p>
<audio controls="controls" id="audio2" preload="preload" style="display:none"><source src="http://langcomplab.net/Honey_Gatherers_Master.webm" style="width:50%" type="audio/webm" /> <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" style="width:50%" type="audio/mpeg" /><source src="http://langcomplab.net/Honey_Gatherers_Master.ogg" style="width:50%" type="audio/ogg" /> Your browser doesn't support this audio format.</audio>
</div>
<p> </p>
<div><button name="play" style="height:25px; width:200px" type="button">Play Story</button></div>

I found this :
If you want to provide your own media controller on the desktop or iPad, just leave out the controls attribute.
Source : Link
However I don't find it a good method to leave out controls as I need it that feature in the first place for fall back message purpose.

video element with controls stops propagation of touch events

If we set controls attribute on video
<video src="http://www.w3schools.com/html/mov_bbb.ogg" controls></video>
it stops propagation of touch events. Why is that happens, and is there a way to fix this?http://jsfiddle.net/HptdV/

ontouchstart event isn't supported in most of the desktop browsers as it is for (iphone/tablet) see documentation.
That's why the fiddle don't show the alert.
As you can see in the UPDATE FIDDLE without the controls the alert is not fired as well.
If you want to control the video you can do it this way html5 audio api
EXAMPLE
<video id="demo" src="http://www.w3schools.com/html/mov_bbb.ogg"></video>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>

MediaElement.js + Reveal JQuery modal: how to pause video/audio on <a="close-reveal-modal">×</a>

How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?
Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.
Here's what I got so far, which is not working...
IN HEAD OF DOM BETWEEN SCRIPT TAGS
document.getElementById("pauseX").onclick = function () {
document.getElementById('player2').pause();
};
TRIGGER TO REVEAL MODAL
Click here to reveal modal.
VIDEO + MODAL CONTAINER
<div id="vid-1" class="reveal-modal">
<div class="center">
<video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
<source type="video/mp4" src="../media/vid-1-480x320.mp4" />
<source type="video/webm" src="../media/vid-1-640x480.webm" />
<object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">
<param name="movie" value="../build/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=../media/vid-1-480x320.mp4" />
<img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1"
title="No video playback. Update browser, enable Javascript, or install Flash." />
</object>
</video>
</div>
<a id="pauseX" class="close-reveal-modal">×</a>
</div>
Already tried many other solutions, including...
Javascript to stop HTML5 video playback on modal window close
...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?
Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)

if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error
Try to move these instructions on the bottom or on DOM ready event

Got it solved with this script...
<script>
$('.close-reveal-modal').click(function() {
$('video, audio').each(function() {
$(this)[0].player.pause();
});
});
</script>
There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks #Fabrizio for suggesting I examine my ID attributes to begin with...)