Geek Answers Handbook

How can I make a carefree audio loop with a mobile browser?

It seems I can’t achieve the aimless loop with the mobile phone. This is what I have done so far:

https://github.com/Hivenfour/SeamlessLoop

  • Creates a space.

http://www.schillmania.com/projects/soundmanager2/demo/api/

  • Creates a space.

https://github.com/regosen/Gapless-5

  • Creates a space.
  • Loads the same sound twice.

https://github.com/floatinghotpot/cordova-plugin-nativeaudio

  • Creates a space.

HTML5 audio

  • Creates a space.

Cordova Media Plugin

  • Creates a space.

Webaudio

All of the above is verified using mp3 and ogg.

EDIT:

The SoundJS cordova plugin is broken and therefore does not work;

https://github.com/CreateJS/SoundJS/issues/170

+8
javascript html cordova
source share
2 answers

With HTML5 If you are using HTML5, use the loop attribute.

<audio controls loop> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

It does not create a space, checks your audio file, most of the audio file has a gap at the end.

You can test it here , just add the loop attribute and start the page.

With javascript

There is also an alternative here using javascript

 myAudio = new Audio('someSound.ogg'); myAudio.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); myAudio.play();

Here, JavaScript will create a small gap, you can overcome it by playing in a loop when the sound is not finished, but when the sound is about to end. Here is the code.

Here is what you want.

 myAudio = new Audio('http://unska.com/audio/pinknoise.ogg'); myAudio.ontimeupdate= function(i) { if((this.currentTime / this.duration)>0.9){ this.currentTime = 0; this.play(); } }; myAudio.play();

There is a demo here.

+3
source share

Try SoundJS . It includes the cordova plugin.

-one
source share

More articles:


All Articles