Auto Play HTML5 Audio Element & Animation
Ad
I am working with a code that controls a very basic html5 player with animated elements. As is, the code starts the audio and the animation when clicked. I would like for the audio and animation to begin automatically as soon as the page loads. Any help would be greatly appreciated. Thanks!
$( document ).ready(function() {
$('.spinner-wrap').click(function() {
var $this = $(this),
audio = $this.siblings('audio')[0],
bpm = Number($this.siblings('audio').data('bpm'))
pulse = (60/bpm)*1000;
if (audio.paused === false) {
audio.pause();
audio.currentTime = 0;
$this.removeClass('playing');
clearInterval(intervals);
}
else {
audio.play();
$this.addClass('playing');
}
function pulsing() {
$this.addClass('pulse');
setTimeout(function() {
$this.removeClass('pulse');
}, pulse-100);
}
});
});
Ad
Answer
Ad
I suggest you use the autoplay attribute of the audio tag, like so:
<audio autoplay>
<source src="ogg.ogg" type="audio/ogg">
<source src="mp3.mp3" type="audio/mpeg">
Sorry, no audio
</audio>
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad