Audio Playing Badly when Online - javascript

I've created this game using Javascript, and I play all sounds (including effects and background music) using the Audio type. It works perfectly when I run the page from my computer, but after I uploaded on my host and tried to run from the web, it started to sounds really terrible: sometimes it is delayed, sometimes it does not play at all.
I've noticed that the main problem is related to playing the same audio more than once in a short amount of time: it plays a shooting sound whenever the user clicks on the page, so usually it isn't that bad when they're not spamming their mouse, but once you start clicking many times the sounds turns out terrible.
The audio file for that particular sound is very short, and when running from my computer is has no problem even when the user is clicking very fast. Here is what the function does:
function play(aux,volume){
if(volume == undefined)
volume = 1;
if(!sound){return;}
aux.volume = globalVolume * aux.customVolume * volume;
aux.load();
aux.play();
}
So, pretty much, what it does is loading and playing the sound again whenever that function is called. That was made so it would start again even if the the function is called while the sound was still going on.
Again, this whole things works smoothly when running from my computer, but from the web it just sucks.
Q: Does anyone knows how to fix this? Or does anyone know an alternative I could use to make it work?
Suggestions are welcome as well.

Audio on the web is going through a lot of growing pains, so you might want to save yourself a bit of trouble and use Howler.js:
https://github.com/goldfire/howler.js

Related

How to make a mobile browser play a list of audio files without stopping when the screen is locked?

I would like to have a web page being able to act like a music player.
The user enqueues a list of audio files (hosted on the server) and they start playing. When the first audio is over, the second begins, etc, until the last one.
I was able to easily implement this functionality using an <AUDIO> element, and replacing its src attribute with Javascript by adding an event listener on the ended event.
The problem is that this does not work consistently on mobile, because once the screen is locked, the Javascript does not keep executing. It may work for one song or two, but at some point it stops "skipping" to the next audio track.
From my understanding, this behaviour is caused by the fact that mobile browsers stop the Javascript event loop after some time to save battery when the screen is locked. I am aware of the Screen Lock API, I assume keeping the screen always on would solve my problem, but I don't want to keep the screen always on.
I could delegate playing audio files to a web worker, which should theoretically keep running in the background. Still, I'm not sure it won't be stopped when the screen is locked, and most importantly I am not sure it can even play sounds.
Is there anything similar to the Screen Lock API that allows me to ask permission to keep scripts executing also when the screen is locked?
If not so, how could I overcome this problem?
After some research, I discovered that the act of killing the javascript event loop is highly browser-specific.
Chrome for Android seem to let the playback run indefintely.
Firefox for Android is stricter, and kills the event loop.
The System Wake Lock looks like a promising API for solving the above problem. At the moment, the W3C is still in process of collecting use cases in order to be able to define a new standard:
https://github.com/w3c/system-wake-lock/issues/4

Video doesn't effectively get its `playbackRate` or current time position changed

I'm trying to fast-forward a video playlist on a website to unlock access to the next one. Videos stream without the possibility of fast-forwarding, forwarding and I haven't any video control bar. I have to wait that they slowly finish. When I refresh the page, the video starts on the minute I've left it before. This is the relevant HTML code.
Looking at the video events I've found that it is an open source code of streaming videos, this is the whole relevant code I've copied from Firefox Debugger (with various events).
This is what I've tried on Firefox console to skip the video:
var video = videojs(document.querySelector("video"));
video.currentTime(video.duration());
but it just doesn't work (it reloads the page to the same video, basically it doesn't unlock the next one).
I've also tried to speed up the video with the following code:
document.querySelector("video").playbackRate = 2;
it speeds up but after a second the video gets stopped, and when I refresh the page the time I was at with the speed-up doesn't get saved.
How can I effectively fast-forward/skip it? I have no idea why this is happening.
The site you are accessing is an online learning platform and they will have built in controls to try to avoid people skipping ahead - this is fairly standard with online learning.
There are multiple ways they could do this for example:
report progress regularly from the browser and if it is too fast, reset video back to an earlier point.
monitor requests server side and again if the requests indicate too fast movement through the video, reset the client or respond to the requests with earlier video.
You can study the network traffic and you may be able to find a way round their mechanisms. This might even be arguably a useful use of your time if you are studying Javascript or video, although the tutors probably won't see it that way, but it may be tricky if they have multiple checks built in. You may also miss a mechanism which flags your activity on your account in the background to the tutors which might not be something you want happening...

How to control how much of a HTML5 video buffers?

Context
I am trying to loop several HTML5 videos one after the other. This is achieved via Javascript with an event listener listening for 'ended' - the video to end. At which point the url to the video is changed and video.play() is executed for the new URL.
For simplicity, lets say there are 2 videos that are to be (auto) played. After the second video finishes playing, it goes back to the first and plays that one (and the cycle continues). The videos will get cached on the user's device after they are first played.
TL-DR: Now what I want to achieve is to code a HTML5 video to be 'mobile friendly', in respect to mobile data plans.
I want the video to either stream when the page loads or buffer only a few seconds from after the point from where the user is watching. So if the user is 5 seconds into the video, the buffer extends to 15 seconds into the video (so 10 seconds of the video is buffered in case the network connection is weak). If the user pauses the video, the video stops buffering. Though the user won't have access to controls; they will be unable to forward, rewind or pause. I only gave the example of the user changing the point of the video to emphasise that I want control over how much the video has buffered and will buffer.
Alternatively, I want the video to stream to the user’s device. And only download that which needs to be immediately played. This is the less desirable option and is probably less desirable than leaving the video tag as it is since if the user has a dodgy connection, the video will play, stop, play, etc.
The reason for me wanting to achieve this is that I have noticed in Edge, IE, Firefox and Chrome that the video auto plays (good, that's what I want it to do) and plays while simultaneously downloading the whole video to their device (terrible). Of course this behaviour is expected, but practically, it should not do this. If users leave the site straight away, why would we want them to download a whole video they won't see?
Sort of but not entirely relevant, it doesn’t help:
HTML5 Video: Force abort of buffering
Simply put, the thread shows only hacks to hide the src and not any actual control over the buffer. I need to control the loading of the buffer in real time, relative to at what point the user is at, and not based on a 'pause' event. I would also like to know if there is a little-known supported method across most browsers (I only really need to worry about this on mobile) to achieve this, as opposed to a 'hack'.
Nevershowmyface: From what I can gather from the code, it stops the buffering every 0.5 seconds. There is no code for resuming the video? As for why this method will not work, it is not buffering relative to at what point the user is at. For all intents and purposes, it is still buffering the video in a linear fashion, without depending on a variable (the point at which the user is at). It's just doing it more slowly or 'in chunks'. If it loads another chunk just before the video runs out of video, I risk the video stopping and waiting to load again if the connection is poor.
Preload:none is useless here since the video is automatically played (notice bold auto at the top). I should have been more explicit. When the page loads, the video automatically plays. Preload loads the video before the play button is clicked on; preload:"none" does not load the video before play is clicked. But since there is no play button and the video plays once the page has loaded, it is a useless attribute.
My hopeless conclusion in regards to what should be a vital and basic feature
(not a rant)
From what I have found, there is no standardised way to achieve this and there are only ‘hacks’, as described in the post, which only serve to provide limited buffering functionality/ control in some browsers, potentially breaking other browsers and potentially having no effect in other browsers. In light of this, I’m on the verge of giving up on this task so thought I’d ask if anyone else has effectively managed to achieve this; it appears to have no support or has not even be considered in HTML5 or Javascript; I might be and hope I'm wrong – would be great to have this in Javascript.
Do other web developers not consider this when they use videos on their sites? I have spoken to other developers about this and they said the data usage from a site is not or is rarely the concern of the developer.
While I understand there are more important things to worry about, it goes without saying this would be very important for mobile users with low data plans.
Analysis:
The HTML5 audio element does not have a stop() function, nor does it
have an option where you can set the amount of data that it is allowed
to buffer, or a way of saying you want the element to stop buffering -
Don't confuse this with the 'preload' function, this only applies to
the element before the play button is clicked.
I have no clue why this is and why this functionality is not
available. If anyone can explain to me why these crucial functions are
not implemented in a standard that should make web development for
mobile phones better and more standardized I would love to know.
And before someone says the conclusion from that post was that this is currently impossible, note:
1) I am dealing with a video file, not an audio file. Slightly different context, where the file being buffered is significantly larger than an .mp3 file.
2) I am not trying to stop buffering altogether. I am trying to restrict it and keep it relative to the point of the video at which the user is at. So you could actually say I am trying to stop it but at an 'x' number of times after the point where the user's video is.

Loud feedback after HTMLAudioElement is played with JavaScript

I needed a "ding" sound effect for a pomodoro app that I am building, and I found this sound which met my requirements. I play the sound in my application like this:
var audio = new Audio('ding.wav');
audio.play();
My problem is that, while the sound does play, after the sound finishes playing I hear loud, high pitched digital feedback for about a second.
I have not had this issue before when working with mp3s, so to ensure that it was not related to the file type, I tried using a different .wav file from the same website. This file, when played in the same way is not followed by the feedback. Also, the timing suggests that ding.wav has finished playing completely before the feedback starts.
The file that is followed by the feedback does not have any feedback when played through the media player on my computer.
What would cause this kind of audio feedback, and how can I fix it? I have searched on here and looked through the documentation for HTMLAudioElement, but haven't found anything useful so far. I tried lowering the .volume of the element to see if it was related to that, but it didn't make a difference.
If it would be helpful to actually hear what I am hearing, I can make a video and link to it, but I am not sure how else to give an example in e.g., a fiddle, because the audio file is stored locally on my computer.
Update:
I am not sure if this makes the problem clearer, but the issue does appear to be tied to the playing of the sound rather than the audio file itself. Currently, for testing purposes, the playing of the sound is tied to the pressing of a button. If I quickly press the button 5 times in a row the full sound effect will only play fully once (i.e., if I press the button before the sound is finished, the sound is cut off and starts again), but after the sound fades out from the last button press, I will hear one loud feedback beep for each time I pressed the button (i.e., five beeps for five button presses etc.).

Audio is unable to play via javascript on some mobile browsers

I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage. I used the following code
var aud=new Audio("someAudio.mp3");
$(document).ready(function(){
setTimeout(function(){aud.play()}, 10000);
});
It is working perfectly fine on desktop browsers. However, the audio is not playing in some mobile browsers like Google Chrome though it is working in Firefox. What may be the possible reason for this and how to fix it? I saw some similar questions but didn't find a suitable answer.
Thanks in advance
I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage.
You can't unless there has been user interaction.
Handle a click event for some element. In that event handler, play some other audio. (This audio can be silent!) After 10 seconds have passed from load, if the user has touched/clicked something, and you've done this, you should be able to play your audio file.

Categories

Resources