Add Sound Effects To Your Webflow Website Using Howler JS!!

[Music] hi guys uh in this video I'll show you how you can create such breathtaking web experience by adding sound effects and music to your webflow website Howard JS uh is a audio library that we will be using for this video basic understanding of jQuery and JavaScript will be always beneficial but uh we have tried to provide you the easiest and the most effective plug and play uh hjs workflow uh so that you can apply sound and um Sound and Music to to your website just after watching this video so let's hop onto the computer and see how it's [Music] done few things we have to consider before we get even started uh first one is that we cannot play sound or music without the users concerned so we have to make sure we have to take the permission of the user before playing any sound or music into our websites uh I believe you might have experienced this uh somewhere uh and in any websites where audio is being used so we have to to tackle this problem we have used one simple um model which uh asks the users for the permission to play the audio second thing is that we have used uh we have used attributes for this solution the howler JS library has a wide range of possibilities and uh wide range of uses you can always go and visit the actual howler JS website uh which has uh which actually has a lot of demos and the features listed as you can see here you can make music players live radios audio Sprites special audio whatnot but uh this uh solution is a basic work through which will uh basic workflow which covers uh adding and playing background music uh sound effects on Hover and click so third thing uh make sure that uh the audio files that we are going to use has to be hosted on the web somewhere which uh gives you which provides a public URL for use I've used git for this um um you just have to go into the GitHub and create a repository for this and uh from here and you can actually go and add audio files over there and you can get the audio file link by using JS deliver uh the file link might look like this fourth thing uh we have to make sure to add one play and U sorry mute and unmute button uh for the users because uh sometimes the users uh users might get annoyed by the background music so you have to make sure to add one play one mute and unmute button even if you get a permission to play it and that is the things that we need to consider and uh let's uh start now first thing um I have duplicated the same project to give you an walk through like always um first I will give you the structural work through how it's made this is a very basic build um a na bar uh this is the main and the basically it has a background which is fixed and uh over after that we have a section wrap which wraps up all the sections uh this is the mute and unmute button which is also fixed and the scroll uh button which is also fixed and uh this section has a com container and that is it some web animations first thing we have to install the howler JS for this we will use the CDN of the howler JS uh from the JS deliver I'll show you uh this is the JS deliver um website you just have to scroll to the search button search Hower and this one this is a minified JS uh link uh which you can directly use it on your uh web flow project so we will go ahead and uh copy this go to the page settings of the uh we flow project paste it secondly we will uh continue continuously cross reference the clonable page as well uh for better uh speed we'll go ahead and copy the rest of the code and paste it to the body so this is the code for the jQuery this is a CDN link for jQuery because we will be using jQuery for this uh video we will just go ahead and copy the code paste it to the settings and yeah there you go so this code is a pretty descriptive code uh we I have added some comments uh for better understanding uh click save and now what you have to do uh to initiate the Howard JS audio library uh we in the code as you can see here start playing the sound on click uh start is the ID for the button which initiate the code so we'll have to go to the model and here so let's quickly go ahead and make it visible for this is the button we have to add this ID to this button start and let's say we want to uh add the hover and the click sound effect to this button also uh we just have to go ahead and into the custom attributes panel click data slash Dash hover sorry click because uh we will play the hover and click sound effects after initiating this click and let's quickly go ahead and go ahead and uh close this set to none and let's say you want to add the hover and click effect to this button click to this button for the settings the custom attributes data hover okay second one is [Music] data uh click go ahead and copy this one and uh let's say you want to uh add the sound effects uh to this button to the hover and data cck same for [Music] all yeah just add this uh just just add these attributes and you are good to go so as you can see in the code um I'm using this audio files um for the background for the background audio and uh for the click sound I've used this audio and for hover sound I used this audio all the audio files I have uh geted from um the epidemic sound and you can use obviously use any sound but make sure to uh make sure that they are all copyright free yeah just save this publish [Music] [Music] there you go so hope you have found some value in this video like I have said before how JS has a wide range of possibilities and uh use cases so do your own research and if you like to see more videos like this or in any other topic regarding animation and uh webflow let us know in the comments below and uh I would like i' like to mention one more thing that this build is heavily inspired from a website uh called cosmos. Soo uh Manifesto page that is also a very cool site you can check it out and uh clonable of this build can be also found in the video description so give it a check and uh yeah thank you very much for watching see you in the next one

Channel: Pixeto

Views: 270

Keywords:

Id: 29GhoRHGl4A

Length: 9min 51sec (591 seconds)

Published: Mon Apr 29 2024