Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Porównanie zawartości <div> oraz odtworzenie dzwięku.
koxfx
post 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ć.

[JAVASCRIPT] pobierz, plaintext
  1. <script>
  2. new MutationObserver(function (mutations) {
  3. mutations.some(function(mutation) {
  4. if (mutation.type === 'attributes' && mutation.attributeName === 'xxx') {
  5. console.log(mutation);
  6. console.log('Old src: ', mutation.oldValue);
  7. console.log('New src: ', mutation.target.xxx);
  8. return true;
  9. }
  10.  
  11. return false;
  12. });
  13. }).observe(document.body, {
  14. attributes: true,
  15. attributeFilter: ['xxx'],
  16. attributeOldValue: true,
  17. characterData: false,
  18. characterDataOldValue: false,
  19. childList: false,
  20. subtree: true
  21. });
  22.  
  23. setTimeout(function () {
  24. document.getElementById('xxx');
  25. }, 3000);
  26. </script>
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
Comandeer
post 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>


--------------------
Go to the top of the page
+Quote Post
koxfx
post 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ę.
  1. <script>(function(div, button)
  2. {
  3. var observer = new MutationObserver(function(mutations)
  4. {
  5. mutations.forEach(function(mutation)
  6. {
  7. if(mutation.type === 'characterData' || mutation.type === 'childList')
  8. console.log('nastąpiła zmiana zawartości', mutation.oldValue, div.innerHTML);
  9. });
  10. });
  11.  
  12. observer.observe(div, {
  13. childList: true //to wykryje jak zostaną dodane nowe tagi
  14. ,characterData: true //to wykryje jak zostanie dodana nowa treść bez tagów
  15. ,characterDataOldValue: true //to zwróci starą treść
  16. ,subtree: true //a to sprawi, że będzie sprawdzana cała zawartość div
  17. });
  18.  
  19.  
  20. button.addEventListener('click', function()
  21.  
  22. {
  23. var snd = new Audio("pow.mp3"); // buffers automatically when created
  24. snd.play();
  25. }, false);
  26. }(document.querySelector('div'), document.querySelector('button')))</script>
Go to the top of the page
+Quote Post
Comandeer
post 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).


--------------------
Go to the top of the page
+Quote Post
koxfx
post 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)
Go to the top of the page
+Quote Post
Skie
post 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.
Go to the top of the page
+Quote Post
Comandeer
post 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 wink.gif Przechodzi kolejno przez websockets → flash sockets → long polling → zwykły xhr.


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 18.04.2024 - 06:58