MahdiF / loud-links

:sound: A simple tiny Javascript library to add interaction sounds to your website.
https://mahdif.github.io/loud-links/
MIT License
725 stars 59 forks source link

Preload audio #2

Open steinhot opened 8 years ago

steinhot commented 8 years ago

Interesting and useful in the right situation, however, it would be good to preload the audio on page load rather than on trigger. Haven't tried it, but may be possible to load a new player for each instance of the audio on the page? Or Only do it if you have a preload="true" attribute on it?

Without preload, the hover and the click just lag too much to be useful.

Thanks for making this!

MahdiF commented 8 years ago

Thanks @steinhot , yeah preloading the sounds is my next step, I'll try to update it this weekend and hopefully I'll get it right. Thanks for your comment and suggestion, glad to hear that you like it.

Oxicode commented 8 years ago

Check: IMG

MahdiF commented 8 years ago

I'm sorry but I don't get the image, are you saying that the load time is too long or you want to point out the 2 canceled assets with 0B ?

On Mon, Feb 1, 2016 at 4:36 PM, Oxicode notifications@github.com wrote:

Check:

image

— Reply to this email directly or view it on GitHub https://github.com/MahdiF/loud-links/issues/2#issuecomment-178026232.

steinhot commented 8 years ago

206 means that you are just checking e-tags where the assets are already cached locally on your machine. Clear your cached assets and try again and the asset will not begin downloading until you do the hover.

To provide the best user experience, the assets should begin downloading the moment the page is rendered so that by the time the user gets to click on the button or does the hover, all it has to do is start playing.

Certainly if someone was using this library to “audition” a list of sounds you would only want to download them on demand, but for “accent” sounds, I would want them without lag.

Best,

Thom

From: Mahdi Al-Farra Reply-To: MahdiF/loud-links Date: Monday, February 1, 2016 at 7:47 AM To: MahdiF/loud-links Cc: Thom Steinhoff Subject: Re: [loud-links] Preload audio (#2)

I'm sorry but I don't get the image, are you saying that the load time is too long or you want to point out the 2 canceled assets with 0B ?

On Mon, Feb 1, 2016 at 4:36 PM, Oxicode notifications@github.com<mailto:notifications@github.com> wrote:

Check:

image

— Reply to this email directly or view it on GitHub https://github.com/MahdiF/loud-links/issues/2#issuecomment-178026232.

— Reply to this email directly or view it on GitHubhttps://github.com/MahdiF/loud-links/issues/2#issuecomment-178035167.

MahdiF commented 8 years ago

Oh, thanks a lot for explaining this to me Thom.

I'm sorry, I'm still learning all these things, I'm new to Javascript and to all these things including Git.

I hope I get sometime this week to work on adding the option to preload sounds.

Thanks again Thom & Christian for the feedback, I appreciate it.

shshaw commented 8 years ago

The first method off the top of my head to preload audio would be on initialization to create an

Some rough pseudo code:

var elements = {};

for (i = 0; i < hoverLength; i++) { var src = getSource(hoverLinks[i]); if ( ! elements[src] ) { // if the element for this src hasn't been created yet, let's create it now. elements[src] = document.createElement('audio'); // add preload attribute & sources to new element... } trackHover(hoverLinks[i],elements[src]); // Set up hover events, but now it has a second parameter for the

}