81336

Looping in HTML5

Question:

I'm pretty new to this whole html thing. I made this code which allows me to set 2 pictures, e.g. a start and a stop. When 'start' is clicked it should also play a looped audio file which should stop when 'stop' is clicked.

Although the audio stops when I click 'stop', the audio does not loop when playing!

Help would be mucho appreciated...o

This is in the head:

<script type="text/javascript"> function imageSwitch(_imgID,_imgStart,_imgStop,_soundFile) { this.imgID = _imgID; this.imgStart = _imgStart; this.imgStop = _imgStop; this.soundFile = _soundFile; this.pos = 0; this.e; this.change = function() { if(this.pos == 0) { this.pos = 1; document.getElementById(this.imgID).src = this.imgStop; this.e = document.createElement('embed'); this.e.setAttribute('src','https://dl.dropbox.com/u/39640025/MP3/Waves.mp3'); this.e.setAttribute('id','sound'+this.imgID); this.e.setAttribute('hidden','true'); this.e.setAttribute('autostart','true'); this.e.setAttribute('loop','true'); document.body.appendChild(this.e); } else { this.pos = 0; document.getElementById(this.imgID).src = this.imgStart; this.e.parentNode.removeChild(this.e); } } }

This is also in the head:

var wave = new imageSwitch('btn1','https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png','https://dl.dropbox.com/u/39640025/OMAA/Active/Waves%20Active%20PNG.png','https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');

This is in the body:

<div style="position: absolute; left: 10px; top: 60px;"><img src="https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png" width="331" height="96" border="0" alt="one" onClick="wave.change()" id="btn1" /></div>

Answer1:

Your code is OK, I'd rather use <a href="http://www.w3schools.com/tags/ref_av_dom.asp" rel="nofollow">Audio api</a>

The problem in your code, you can't access wave object inside onclick event. Make it global you'll see that works.

wave = new imageSwitch('btn1','https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png','https://dl.dropbox.com/u/39640025/OMAA/Active/Waves%20Active%20PNG.png','https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');

Here is a <a href="http://jsfiddle.net/v97Kq/" rel="nofollow">DEMO</a>

UPDATE-1

And here is the better way, with Auido Object, <a href="http://jsfiddle.net/v97Kq/1/" rel="nofollow">DEMO</a>

function imageSwitch(_imgID, _imgStart, _imgStop, _soundFile) { this.imgID = _imgID; this.imgStart = _imgStart; this.imgStop = _imgStop; this.soundFile = _soundFile; this.song = new Audio(this.soundFile); this.song.loop = true; this.pos = 0; this.e; this.change = function () { if (this.pos == 0) { this.pos = 1; document.getElementById(this.imgID).src = this.imgStop; this.song.play(); } else { this.pos = 0; document.getElementById(this.imgID).src = this.imgStart; this.song.pause(); } } } <h2>UPDATE-2</h2>

For cross browser, you should define different source, <a href="http://jsfiddle.net/v97Kq/3/" rel="nofollow">DEMO</a>

wave = new imageSwitch('btn1', 'https://dl.dropbox.com/u/39640025/OMAA/Waves2PNG.png', 'https://dl.dropbox.com/u/39640025/OMAA/Active/Waves%20Active%20PNG.png', 'https://dl.dropbox.com/u/39640025/MP3/Waves.mp3','https://dl.dropboxusercontent.com/u/39640025/OGG/Waves.ogg'); function imageSwitch(_imgID, _imgStart, _imgStop, _soundFileMp3, _soundFileOgg) { this.imgID = _imgID; this.imgStart = _imgStart; this.imgStop = _imgStop; this.song = new Audio(); if (this.song.canPlayType("audio/mpeg")) this.song.src = _soundFileMp3; else this.song.src = _soundFileOgg; this.song.loop = true; this.pos = 0; this.e; this.change = function () { if (this.pos == 0) { this.pos = 1; document.getElementById(this.imgID).src = this.imgStop; this.song.play(); } else { this.pos = 0; document.getElementById(this.imgID).src = this.imgStart; this.song.pause(); } } }

Answer2:

You should be using the <a href="http://www.w3.org/wiki/HTML/Elements/audio" rel="nofollow">audio element</a> instead of embed.

Check out its api - there is a "loop" attribute for, well, looping.

In order to determine which image to show, you have to be listening to the audio element's <em>play</em>, <em>pause</em>, etc. events.

Recommend

  • Why is this code showing anomalous behaviour? (form not submitted)
  • MongoDB Query double nested documents in array
  • Creating spans that hide when another object is clicked
  • NullPointerException while adding an object to an array
  • Struct v/s Class in C# - Please explain the behavior
  • Xampp PHP server GET works Fine POST isn't working
  • Gaining access to the SVG DOM in Chrome and Safari through Javascript
  • Session management in GWT client side
  • actionscript 3.0 transparent image floodfill
  • Botframework - resize bot chat in width [duplicate]
  • Javascript - Waiting for event before proceeding
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • After converting my FBX file to a .gltf, the model is incredibly small, why?
  • How to get the click event on sIFR embedded tag in IE?
  • Creating a layer of gradient within an SVG path dynamically
  • react native create element with string
  • $_POST for text in DIV elements
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • Making Google Visualization - Annotation Chart to work in GWT
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • Update Google Maps traffic layer without page reloading
  • Uncaught TypeError: $(…).select2 is not a function
  • Remove changes from one element when event occurs on another element?
  • How to view images from protected folder with php?
  • Button click event not firing in jQuery
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • Display images in Django
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • FileReader+canvas image loading problem
  • Resize panoramic image to fixed size
  • WinForms: two way TextBox problem
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • How to include full .NET prerequisite for Wix Burn installer
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?