Тёмный

Intro to JavaScript Audio Effects on Webpages 

Steve Griffith - Prof3ssorSt3v3
Подписаться 101 тыс.
Просмотров 21 тыс.
50% 1

This video covers how you can add sound effects to your webpages when users interact with elements.
Code GIST: gist.github.com/prof3ssorSt3v...
Media Events reference: developer.mozilla.org/en-US/d...
Media Element reference: developer.mozilla.org/en-US/d...
Audio File Repo: github.com/prof3ssorSt3v3/med...
(The repo includes media files from other tutorials too)

Опубликовано:

 

13 июл 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 21   
@GM-xk1nw
@GM-xk1nw 6 лет назад
thank you, Mr. Steve, your tutorials are great.
@saimanoxiconfirmed535
@saimanoxiconfirmed535 3 года назад
just wow, thank you so much for being such a good teacher
@spreadItWide
@spreadItWide Год назад
LMAO!! 3:45 - I looked up and said "Who TF is that?", all arggrevated.. started to crack a smile once I started spinning away from my desk... Idk, if that was your goal; but, good one my friend. lol.
@osoperezoso2608
@osoperezoso2608 5 лет назад
hey man, I'm trying to add audio to my project. I would like a song I've made to be played when I click on one of my photos, continue to loop until the user clicks the image again to stop. I've watched this video 30 times and I still can't figure it out. This is like my 3rd JS project and I'm having a really hard time. Do you suggest a any other resources? I've looked ALL over the internet lol.
@gabrielaltamirano1112
@gabrielaltamirano1112 5 лет назад
check out p5.js library, and p5.sound library, its not hard to implement, and you can have great results for interactive audio
@jagdishrao1523
@jagdishrao1523 5 лет назад
Great
@gamemastr1
@gamemastr1 3 года назад
I've been spinning my wheels on this for too long and the Boss Man is getting irritated so I am asking for help please. I've tried so many work-arounds, I'm lost. This script is so close to what I am trying to accomplish. More so than anything else I have tried, but unfortunately it isn't quite doing what I need and was hoping someone might know how to fix this code to do what I need. (I like this code, it make sense to me) I have a webpage that lists a bunch of items. Each item is written in its own container. It has a pic of the item, a description, and one, single green play button that has an audio version of the description. I can get this script to play the various audio files where they need to play but what I am trying to fix is this: if I tap on 'sound1' it plays. I tap on 'sound2' before 'sound1' finishes, it plays too. Now I have 2 audio files playing at once. If I keep going down the list it sounds like an episode of The View. (If I tap one I have already tapped before it ended, it will reset and start playing from the beginning.) What can I do to this code that will, with one tap, play that audio, then single tapping another audio, stop the one playing and start playing that next file? This is about esthetics, simplicity, and an uncomplicated flow for the user.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 года назад
Have you tried using a single new Audio( ) object that you create in your code? Clicking the buttons just changes the source on your Audio object. Instead of having a bunch of elements on the page?
@tebqzik_music
@tebqzik_music 4 года назад
thanks Mr Steve for this tut, but one thing i wanna wanna how to design an uninterupted audio player that plays music doesnt stop stop when navigating thru pages, like Soundcloud audio player
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
If you have an HTML5 audio element on a webpage, by default, it will continue to play by default when the user switches tabs... if you are on a laptop or desktop. On mobile, the background tabs get paused. Now, if you are talking about playing music while looking at different content on the same website in the same tab, then you are talking about building a Single Page Application. It is one HTML file that is loading and displaying different content. It LOOKS like you are changing pages but not really. Watch my video on Single Page Applications for an introduction.
@tebqzik_music
@tebqzik_music 4 года назад
@@SteveGriffith-Prof3ssorSt3v3 Yeah but im taking about site like SoundCloud , where you will navigate thru page without disturbing music, if you look at SoundCloud Player, it docks at and stick at the bottom of the screen and it doesnt stop playing music even if you navigating pages
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
@@tebqzik_music that's what the 2nd half of my answer is about. You cant actually leave a webpage and keep the music playing.
@leeeric6292
@leeeric6292 11 месяцев назад
I got confused in the last part of the video, you mean apply "if (SOUNDS[fn]){ SOUNDS[fn] .pause(); SOUNDS[fn] = null; }" then we can only hear one sound at a time, even though we click or double clicks all three paragraphs in the same time ? I have downloaded your program and run, but I can hear all the sounds if I click or double clicks all the paragraphs in the same time.....
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 11 месяцев назад
Sorry that wasn't very clearly explained. It means that if static is already playing then it will stop the old version of static before starting a new one. It is not cancelling all playing sounds, just one of the same name. You could loop through the SOUNDS object and pause( ) and set each to null if you want to stop all playing sounds.
@gabrielhauschildt9041
@gabrielhauschildt9041 4 года назад
You can just change the source of a single audio element every time it is clicked if you want all other sounds to cut out when a new sound is played. Just use the first trick shown in this video. No need to worry about setting variables to null.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 4 года назад
Setting the variable to null helps avoid memory leaks when you are creating a lot of audio elements.
@robert-asdf
@robert-asdf Год назад
may be a bit off but is there a confirmed online source to upload audio FXs that's not google drive? i'm using learning mostly css right now.
@SteveGriffith-Prof3ssorSt3v3
Audio files are just files like js or css or images. You can load them from any online source
@robert-asdf
@robert-asdf Год назад
@@SteveGriffith-Prof3ssorSt3v3 as a created button to instantly play sound effects from an uploaded library without the standard players is very challenging although i know about the base64 method which is can be too much code at times at times.
@RameenFallschirmjager
@RameenFallschirmjager 3 года назад
You made things too complicated.
Далее
HTML5 Video
10:08
Просмотров 7 тыс.
Scrolling Pages with JavaScript and CSS
14:28
Просмотров 6 тыс.
Аминка ❤️
00:16
Просмотров 595 тыс.
Штаны легионера
00:44
Просмотров 324 тыс.
Capture DOM Changes with MutationObservers
11:45
Просмотров 12 тыс.
Audio Visual Effects in JavaScript Games
24:43
Просмотров 18 тыс.
The Hidden World of requestAnimationFrame
9:22
Просмотров 31 тыс.
Creating and Dispatching Custom JS Events
12:28
Просмотров 19 тыс.
JavaScript AUDIO VISUALIZERS tutorial for beginners
28:53