ShoutBox i dźwięki

Wraz z pojawieniem się ShoutBox 1.1.1 możliwe stało się łatwe przypisywanie własnych akcji dla nowych wiadomości. Jedną z takich akcji może być sygnał dźwiękowy, informujący nas o tym, że właśnie ktoś coś napisał.

Dźwięk w przeglądarce

"Stworzenie" dźwięku jest stosunkowo proste. Potrzebny nam do tego będzie jakiś pliczek dźwiękowy (ja korzystam z ding.wav) oraz div, który wykorzystamy w "niecnych" celach. A więc do roboty. Zacznijmy od diva:

<div id="sounddiv" />

Najgorsze za nami

A teraz kod js odpowiadający za dźwięk:

var sbs = document.getElementById("sounddiv");
if (sbs) //jeśli znalazł diva
 sbs.innerHTML="<embed src='ding.wav' hidden=true autostart=true loop=false>";

Kod ten nie zawsze będzie działać na wszystkich przeglądarkach. Niektóre z nich, przy pierwszym wywołaniu tego kodu, mogą chcieć doinstalować jakiś plugin, więc się nie dziwcie gdy ujrzycie jakiś dziwny komunikat.

Podpięcie tego kodu do ShoutBoxa

Nasz kod podepniemy poprzez zdarzenie. Interesować nas będzie tylko dźwięk po pojawieniu się nowej wiadomości:

var sb = new ShoutBox('sb'); //standardowy obiekt shouta

//nasza funkcja z dźwiękiem
sb.bind('message',null,function(data){
if (data.params.actionName != "read")
	return true;
var sbs = document.getElementById("sounddiv");
if (sbs)
	sbs.innerHTML="<embed src='ding.wav' hidden=true autostart=true loop=false>";
return true;	
});

//dalszy stary standardowy kod
sb.getMessages();

Podsumowanie

Jak widać cała operacja wygląda w miarę prosto. Tu na stronie jest to też podpięte. Aby to wypróbować, należy się zalogować i we własnym profilu zaznaczyć checkbox "Dźwięk w ShoutBox".

Komentarze

 

Dodaj komentarz

 

Dostępne bbcode: b, u, i, url, code, php, css, html, sql, js

Ostatnio komentowane

  1. Mysql - FAQ Paweł
  2. Pager 2.5.1 oraz EPa... Na szybko2
  3. Pager 2.5.1 oraz EPa... Sławek
  4. Mysql - FAQ Piotr
  5. Liczba dni roboczych Na szybko2
  6. Liczba dni roboczych Naszybko
  7. Klasa widoku nospor

Skrypty użytkowników

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer