Porównanie zawartości <div> oraz odtworzenie dzwięku. |
Porównanie zawartości <div> oraz odtworzenie dzwięku. |
10.08.2015, 11:40:23
Post
#1
|
|
Grupa: Zarejestrowani Postów: 47 Pomógł: 0 Dołączył: 18.04.2015 Ostrzeżenie: (0%) |
Chcę porównać div przed i po zmianie treści a po tym odtworzyć dzwięk. Do dzwięku wystarczy tag <audio>.
Mam taki kod ale nie wiem jak za to się zabrać.
|
|
|
10.08.2015, 11:58:11
Post
#2
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%) |
Kod <!DOCTYPE html>
<html lang="pl" dir="ltr" class="no-js"> <head> <meta charset="UTF-8"> <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> <title>Ehhhh</title> <style> </style> </head> <body> <div>Tekst</div> <button>Zmień treść</button> <script>(function(div, button) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if(mutation.type === 'characterData' || mutation.type === 'childList') console.log('nastąpiła zmiana zawartości', mutation.oldValue, div.innerHTML); }); }); observer.observe(div, { childList: true //to wykryje jak zostaną dodane nowe tagi ,characterData: true //to wykryje jak zostanie dodana nowa treść bez tagów ,characterDataOldValue: true //to zwróci starą treść ,subtree: true //a to sprawi, że będzie sprawdzana cała zawartość div }); button.addEventListener('click', function() { div.innerHTML = Math.round((Math.random() + 1) * 99999); }, false); }(document.querySelector('div'), document.querySelector('button')))</script> </body> </html> -------------------- ★Mój blog || Okiem krytyka★
|
|
|
10.08.2015, 15:43:22
Post
#3
|
|
Grupa: Zarejestrowani Postów: 47 Pomógł: 0 Dołączył: 18.04.2015 Ostrzeżenie: (0%) |
Działa to dość dobrze w Firefox, w Chrome średnio. Został tylko jeden problem. Kod działa tylko dla karty (przeglądarki) w której została wywołana akcja. Potrzebuję aby działało dla wszystkich a najlepiej dla wszystkich oprócz osoby wywołujące akcję.
|
|
|
10.08.2015, 15:50:06
Post
#4
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%) |
Dla wszystkich userów? W takim razie musisz propagować akcję przez rozwiązanie typu WebSockets (polecam bibliotekę socket.io, bo jest prawdopodobnie najłatwiejsza do ogarnięcia).
-------------------- ★Mój blog || Okiem krytyka★
|
|
|
11.08.2015, 14:00:56
Post
#5
|
|
Grupa: Zarejestrowani Postów: 47 Pomógł: 0 Dołączył: 18.04.2015 Ostrzeżenie: (0%) |
Czy jest inna możliwość rowiązania tego problemu. (dla wszystkich userów, oprócz websocket)
|
|
|
11.08.2015, 14:20:47
Post
#6
|
|
Grupa: Zarejestrowani Postów: 555 Pomógł: 84 Dołączył: 20.02.2008 Skąd: Małopolska Ostrzeżenie: (0%) |
AJAX polling lub long-polling, ale pod względem wydajności i precyzji jest to znacznie gorsze rozwiązanie.
-------------------- Wieloprocesowość i wielowątkowość w PHP, poznaj Kraken PHP!
Serwer HTTP i WebSocket w PHP | Promise/A+ Strona Domowa | Elradia MMORPG FireFox: make the web better. |
|
|
11.08.2015, 16:02:14
Post
#7
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%) |
Socket.io rozwiązuje to wewnętrznie Przechodzi kolejno przez websockets → flash sockets → long polling → zwykły xhr.
-------------------- ★Mój blog || Okiem krytyka★
|
|
|
Wersja Lo-Fi | Aktualny czas: 18.04.2024 - 06:58 |