What is the best way for Playing audio in HTML5 game for mobile phone with collision.
I trying to use audio tag in HTML5, but there are a delay in sound when the collision repeated quickly !!!!!
Any idea ?
Once I've been playing around with HTML 5 and GameDevelopment - trying things out and so on. For Sound I used Soundmanager, take a look here: Click Here , maybe this can help you. It worked fine for me.
sound playing is limited to 1 sound at time on iPhone and have a big latency,
latency is probably the same on Android.
then unfortunately, it's actually not possible to use <audio> on game for collision sound. (you can use it for background music).
Related
I'm developing an experimental website which uses p5.sound to analyze a certain song and I use the frequencies of this song to draw on a canvas.
The problem is that the sound sounds great on my laptop & pc, but when I try to listen it on mobile, it's starting to flicker, having noisy parasites and it's slowed down (a lot...)
I've tried on others phones and it's the same.
Even on the official doc : https://p5js.org/examples/sound-sound-effect.html
it's laggy for a simple ring sound.
Does anyone experienced this issue?
It's working fine if I use regular JavaScript and html <audio> elements.
Also, do you know others simple ways to get frequencies of a sound played from html <audio> elements?
So I found the solution by actually look how p5.sound was working.
I ended up using the Web Audio API.
I created an audio context then an analyser and the sound was no longer distorded on mobile.
The process is almost the same as if you where using p5 :)
I have a simple HTML5 video on my website. I want it to loop so I added loop tag to it. It works, the problem is that it stutters everytime it restarts. The video is very short, has only 8 seconds, but when it reaches the end, and then restarts, the very first frame of the video "freezes" about half of a second. I tested it on Chrome and on Firefox, it only happens on Chrome.
After google it I found several workarounds, but none of them worked for me. I tried to catch the ended event of the video in JS so I play the video again, to clear the poster image of the video when it starts to play $video.attr('poster', ''), and so on.
If I play the video on Windows Media Player or any other video player with "repeat" mode on, it loops without any stutter, so I don't think is something related with the video encoding.
<video loop>
<source src="myvid.mp4" type="video/mp4">
</video>
When trying to optimize my video size, I found Handbrake, a video editor software. After optimize my video size with this software, it gone from 1.4MB to
272KB, and magically the stutter disappeared.
So after all, it really was about video encoding, or something related with.
For those who came here from google and have already tried the many workarounds suggested to this problem in other stack questions, try to optimize your video with Handbrake and I hope your "stutter" goes away.
In my own attempts to loop a seamless Ken Burns clip as a background for a hero unit, I also ran into inexplicable stutter issues. Turns out, the loop property isn't implemented very well in many browsers, generally giving me a half second to full second pause before resuming playback. To correct this, I had to implement my own looping behaviour:
document.querySelector('video').addEventListener('ended', function(e) {
e.target.currentTime = 0;
e.target.play();
}, false);
This was fast enough in testing to appear actually seamless. Complex stream encoding (e.g. use of lookahead frames or other non-baseline features) will only compound this overall issue. Always make sure you export your video "for the web" / "streaming", which disables these incompatible features.
I merged amcgregor's solution with Thomas Brad's solution and came up with something like this:
document.querySelector('video').addEventListener('timeupdate', function(e) {
if(e.target.duration - e.target.currentTime <= 1) {
e.target.currentTime = 0;
e.target.play();
}
}, false);
With this one stutter goes away even for not well encoded videos.
For a few duys i started working on a small js based browser racing game.
I dont have too much experience in javascript but i learn fast. The game is based on php and a little js for the animation. Also trying to implement node.js to make it realtime.
The game works but want to add sound so it would be more interesting... but i came across a little problem, gapless sound looping. Tryied several methods and frameworks but no results, only in chrome with some but thats not enough.
Please give some ideas/solutions/examples of how would you do it. Thanks in advance.
I managed to make a reasonable engine sound by recording a real engine in 250 RPM increments, then created the additional very high RPM wav files by pitch shifting and increasing the volume. I then mix between these continually playing wav files using multiple HTML5 web audio gainNodes.
The pitch-shift is still noticable, but not to bad. If you want perfect sound you would will need to add additional wav files that start at one pitch and shift gradually to another, then logic to fade these in/out appropriately.
Looping the audio is done by having two wav files that overlap slightly and fade between them through the overlap, so you don't hear a click. Or alternatively create one long wav file beforehand using this technique so the clicks are infrequent.
I have a video I'm playing on iOS 4.2 where I'm listening in the timeupdate events and pausing video at certain times. This is fairly accurate. However, I also have player controls that seek to certain parts of the video using current time.
There appears to be a bug where the time seeked is never accurate - not accurate enough for what I need to do with it. The problem gets worse as the length of the video increases and I've also noticed that at the beginning of the video the seek time would be around 0.5 miliseconds off the time I specify but as I try to seek further along in the video this increases. Seeking 2 minutes into a video files is off by around 2 seconds.
I don't think this is a probloem with my code as I've replicated the same behaviour using the opensource Jplayer.
http://www.jplayer.org/HTML5.Media.Event.Inspector/
currentTime has caused me nothing but problems on iOS. It didn't even work on 3.2.
Is the problem I'm having now a known bug and is there a workaround for this?
I ran a test to see if I could confirm the same behavior on my emulated build of iOS 4.1.
I definitely experienced similar problems on both the iPhone and iPad. But I didn't notice the offset growing proportionately as the video got longer - it seemed more random. If I had to guess, I'd say the video is seeking to the keyframe prior to to your requested time rather than to the correct position.
The iOS devices seem to be reporting currentTime accurately... You are able to pause the video in the correct place and it looks like the timecode on the iPhone matches that on the desktop. It just won't queue up in the correct place.
What kind of video are you using? I tested h264 video encoded with ffmpeg.
It might be worth adding more keyframes to your video or looking for a switch in your encoder that makes the content more easily seekable. I know ogg video has support for indexing (see this post). That won't help this issue, but we might be able to find a parallel solution that works here.
This is going to be a problem for me very soon, so I'm very interested to see if you found a fix. Please post back if you have.
I found this link to a page here on StackOverflow about "Creating Audio using Javascript in <audio>", and this page on how to play audio on multiple channels. I found that the iPhone supports the audio tag and the Audio object in Javascript to play single channel audio, but is there a way to play audio on multiple channels?
Maybe I'm over complicating this, so this is what I'm trying to do. I want a way to make a graceful audio player in Javascript that supports transitioning from one audio file to another. The way I was going to implement this is to incrementally reduce the volume on one channel while incrementally increasing the volume on the other channel so I'd get a kind of fade effect. Is there a simpler solution to this using only Javascript? I guess another solution would be to reduce the volume to a certain point, start the new audio file on the same channel, then increase the volume again. This circumvents the need for fading, but I would like to fade if at all possible.
Is this possible? I know the HTML5 spec isn't finished yet, but is there some kind of workaround that you know of? Do any of you have ideas for another approach?
From what I can tell from this post about playing audio in the Android browser, this isn't supported yet, but do any of you know if it will support multiple channel audio once the audio tag is supported? Does opera mini support this?
This is an old question I know :).
iOS Safari does not support multiple audio objects playing at the same time. Also, it is not possible for having a fade-in/out effect for iOS, as the only way to change the volume setting is from the hardware itself. Apple decided to give this ability only to the device user. Volume setting is not writable by javascript. It is not even readable (always returns 1).
You can check out the Safari documentation for iOS for more info.
For Android, to be honest I have no idea.
There's no direct way that I know of to have multiple channels on an audio tag, but check out this blog post on using multiple audio tags to simulate multiple channels. http://www.storiesinflight.com/html5/audio.html
I know this is a total hack but try this trick I came up with...
Go to the page below and type on the home row keys to play a blues riff (type multiple keys at the same time etc.)
http://davealger.com/jthump/
The way this works is to create invisible <iframe> components that play a sound before destroying the frame.
I know it is a total hack and I look forward to better HTML 5 multi-channel audio support in the future.