IVONA WebReader czyli gadające strony WWW

Posted on Kwiecień 26, 2010 by d(O_o)b

W tym poście postaram się przybliżyć troszkę projekt IVONA WebReader – aplikacji internetowej mającej na celu udźwiękowienie praktycznie każdej (nie chronionej hasłem) strony internetowej. Produkt ten powoli zajmuję stabilną pozycję na rynku, ponieważ jest on wykorzystywany przez sporą liczbę państwowych instytucji, które pragną dostosować swoją stronę do potrzeb osób niewidomych. IVONA WebReader został również umieszczony na mojej stronie. Możecie go zobaczyć w prawym górnym rogu tego artykułu (szary guzik z napisem odsłuchaj).

Instalacja usługi

Instalacja tej usługi jest stosunkowo prosta i nie wymaga od klienta znajomości jakiegokolwiek języka programowania. Wystarczy zalogować się w serwisie IVONA, kliknąć w link Moje Konto (w prawym górnym rogu), a następnie przejść do zakładki zatytułowanej WebReader. Pojawi się tam strona ze statusem usługi na której będziemy mogli aktywować produkt. Podobnie jak inne aplikacje na rynku, IVONA WebReader możemy aktywować w 30-sto dniowej wersji Trial lub wykupić abonament na rok, dwa lub trzy lata. Gdy usługa zostanie aktywowana, możemy przejść do kolejnego kroku, jakim jest ustawianie parametrów naszego odtwarzacza. Kreator został podzielony na 4 główne kroki:

Wybierz głos i ustaw parametry

Na tym etapie konfigurujemy parametry odtwarzacza. W pierwszej kolejności wybieramy jeden z głosów IVONA, którym będą czytane treści naszych stron internetowych (rzecz jasna dla stron w języku polskim wybieramy głosy polskie itd.). Możemy również ustawić prędkość syntezowanych zdań oraz ich głośność (głośność syntezy nie wpływa na początkową wartość głośności odtwarzacza, po prostu nagranie będzie syntezowane ciszej, tak więc zalecam ustawienie tego parametru na 100%). Kolejnymi parametrami są wartości odpowiadające za wygląd i zachowanie odtwarzacza. Zmiany jakie dokonamy będą na bieżąco pokazywane w okienku podgląd odtwarzacza. Możemy tutaj określić jego wymiary, zachowanie kiedy odtwarzacz jest spauzowany oraz jego wyrównanie (do lewej lub prawej). Kiedy udało się już skonfigurować wszystkie opcje dostępne w tym kroku, możemy przejść dalej klikając przycisk „Następny” umiejscowiony na samym dole strony.

Dopasuj kolory

Jak sama nazwa wskazuje, w tym kroku dobieramy kolory odtwarzacza. Można skorzystać z gotowych wariantów kolorystycznych lub stworzyć swój własny niepowtarzalny wygląd dopasowany do Twojej strony. IVONA WebReader umożliwia ustawienie wartości kolorów dla jego tła, przycisków lub konturu oraz ustawienie jego przezroczystości. Dzięki opcji podglądu będziesz mógł na bieżąco obserwować jak prezentuje się odtwarzacz o wybranych przez Ciebie parametrach. Uwaga ! Zalecam również ustawienie wartości koloru tła Twojej strony. IVONA WebReader używa tego parametru podczas wyświetlania pod przeglądarkami Opera ponieważ produkty z tej rodziny nie pozwalają na osadzenie odtwarzacza w trybie z przeźroczystym tłem, tak jak ma to miejsce pod innymi przeglądarkami.

Sporządź listę domen

W tym kroku definiujesz listę domen, na których będzie osadzony produkt IVONA WebReader. Domeny (lub sub-domeny) wpisujemy w wyznaczone pole tekstowe, a następnie klikamy na przycisk „Dodaj”. Krok ten jest niezbędny do prawidłowego działania odtwarzacza i ma on na celu zabezpieczenie Twojego odtwarzacza przed innymi, którzy chcieliby go użyć na własnych stronach. Listę domen będziesz mógł w każdej chwili edytować w dziale Zabezpieczenia

Wygeneruj kod

To ostatni krok który musimy przejść, aby otrzymać kod, który będziemy mogli skopiować do źródła strony internetowej. Na tym etapie należy określić, które elementy strony mają zostać udźwiękowione. Możemy tutaj zaznaczyć, czy WebReader ma rozpoznawać treść do czytania umieszczoną wewnątrz znaczników (np. „p”,”body”, „table”) lub też treść umieszczoną wewnątrz dowolnych znaczników posiadających atrybut class (wybieramy opcje class= i podajemy wartość tego atrybutu) lub id (wybieramy opcje id= i podajemy wartość tego atrybutu). Jeśli ktokolwiek miałby trudności z tym krokiem proponuję zapoznać się z tym dokumentem.

Możliwośći

IVONA WebReader umożliwia odsłuchiwanie zawartości stron pod każdą dobrą przeglądarką na rynku. Działa również pod przeglądarkami dostępnymi na nowoczesnych telefonach komórkowych (np. Safari Mobile, Opera Mini, Skyfire). Po kliknięciu w przycisk Odsłuchaj następuje osadzenie obiektu Flash, który jest odpowiedzialny za odtwarzanie dźwięku oraz za interfejs użytkownika. W przypadku przeglądarek mobilnych zostajemy bezpośrednio przekierowani na plik MP3, który otwiera się w domyślnym oprogramowaniu dostępnym na telefonie (np. Windows Media Player, czy Quick Time). Najfajniejszą opcją w tej aplikacji jest moim zdaniem to, że nie musimy generować odtwarzacza dla każdej zmiany na stronie. IVONA WebReader automatycznie pobiera aktualną wersję strony internetowej i generuje na jej podstawie dźwięk z syntezą mowy.

Dostępność dla osób niewidomych oraz słabowidzących

IVONA WebReader, w przeciwieństwie do większości aplikacji napisanych w technologi Adobe Flash, jest w pełni kompatybilny z oprogramowaniem typu screen-reader, ponieważ jest on widoczny dla niego jako zwykły link, a nie obiekt Flash. Oczywiście przeglądarka musi sama w sobie wspierać tryb Accessibility i umożliwiać przełączanie się między kolejnymi elementami na stronie za pomocą klawisza Tab. Kiedy osoba z wadą wzroku będzie się przełączać między kolejnymi elementami strony i natrafi w końcu na link IVONA WebReader, oprogramowanie screenreader przeczyta jej (w zależności od wybranego języka odtwarzacza) następujące zdanie:

IVONA Webreader. Wciśnij Enter by rozpocząć odtwarzanie

IVONA Webreader. Press Enter to begin reading

Po wciśnięciu klawisza Enter, następuje rozpoczęcie odtwarzania, i w tym momencie możemy używać skrótów klawiszowych dostępnych w aplikacji (Enter – spauzuj/wznów odtwarzanie, klawisze numeryczne od 0 do 9 – poziom głośności, strzałki lewo i prawo – skok o 5 sekund w przód lub wstecz). Warto jeszcze wspomnieć o bardzo ważnym skrócie klawiszowym, jakim jest Ctrl+Spacja. Wciśnięcie tej kombinacji, niezależnie od tego, na jakim elemencie html-owym znajduję się focus, spowoduje rozpoczęcie odtwarzania artykułu.

Podsumowanie

Moim zdaniem produkt IVONA doskonale nadaje się do udźwiękowienia praktycznie każdej strony internetowej. Jest on łatwy w konfiguracji i nie wymaga instalowania dodatkowych komponentów po stronie serwera. Jedyne co mi się w nim nie podoba jest to, że syntezator słabo radzi sobie z artykułami, które przeplatają się dwoma językami (jak np. moja strona, na której jest dużo nazw własnych w języku angielskim), ale mam nadzieje, że w miarę upływu lat będzie coraz lepszy pod tym względem. Cena, jaką musimy zapłacić, jest też niemała, jak na polską kieszeń, ale należy się z tym pogodzić, iż ceny oprogramowania opartego o syntezę mowy, nigdy nie zaliczały się do tych najtańszych. Nie mniej jednak zachęcam każdego właściciela dobrej strony internetowej do zapoznania się z tym produktem, ponieważ nie możemy zapominać o ludziach, którzy na prawdę mają ograniczony dostęp do zasobów internetu, a oprogramowanie z syntezą mowy na pewno ułatwiłoby im odszukanie najważniejszych informacji na stronie.

Świątecznie: SpeakingSanta.com

Posted on Grudzień 21, 2009 by d(O_o)b

Przedwczoraj uruchomiliśmy nasz nowy serwis www.speakingsanta.com. To świąteczny viral marketingowy IVO Software, który został zrobiony we współpracy z pracownią animacji Esy-Floresy. W tym miejscu chciałbym podziękować im za na prawdę profesjonalne podejście do sprawy, terminowość i miła współpracę. Dziękuję też chłopakom ode mnie z firmy, którzy wykonali back-end w PHP i przygotowali specjalne modyfikacje głosów. Patronat medialny, a w sumie to bardziej marketingowy ( o ile mogę to tak nazwać ) objęła Wirtualna Polska. Cały projekt udało nam się zrealizować w ok 3 tygodnie, co jest moim zdaniem niezłym osiągnięciem, jak na taki serwis, choć muszę przyznać, że jako jedyny koder Flasha miałem trochę roboty na głowie, co odbiło się nawet jedną nieprzespaną nocką.

Rzecz polega na wyborze odpowiedniej postaci i wprowadzeniu tekstu, którym będzie dana postać mówiła. Wygenerowany tekst wraz z mową możemy przesłać później znajomym lub opublikować gdzieś na Internecie. Do wyboru mamy 4 postacie: Mikołaja, Renifera, Misia oraz Panią Zając. Serwis dostępny jest w 3 wersjach językowych: w polskiej, amerykańsko-angielskiej i brytyjsko-angielskiej. W polskiej wersji możemy usłyszeć postacie, które posiadają wadę wymowy np. Renifer się jąka, a Pani Zając sepleni. Osobiście uważam, że nie jest to fajny pomysł, ale cóż … „de gustibus non est disputandum ” … mam nadzieje, że chociaż Wam się to spodoba

Korzystając z okazji chciałbym również życzyć wszystkim Zdrowych i radosnych świąt Bożego Narodzenia, bogatego Mikołaja oraz wiele inspiracji i powodzenia na Nowy Rok !!!.

ActionScript 3 Multiple Sound Player

Posted on Grudzień 19, 2009 by d(O_o)b

Przedwczoraj kierownik zlecił mi napisanie prostego programiku we Flashu, który na wejściu dostawałby tablicę z adresami URL do dźwięków, wczytywałby je do pamięci podręcznej, a następnie można było odpalić dany dźwięk wywołując odpowiednią funkcję z parametrem, który byłby wskaźnikiem do odpowiedniego obiektu w tej tablicy. Jak tylko znalazłem wolną chwilkę, zabrałem się do pisania i po 2 godzinkach kodowania udało mi się rozwiązać następujący problem w taki sposób:

package
{
	import flash.display.MovieClip;
	import flash.external.*;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.media.Sound;
	import flash.media.SoundChannel;
 
	public class MultipleSoundPlayer extends MovieClip {
 
		public var myChannel:SoundChannel = new SoundChannel();
		public var soundArray:Array = new Array();
		public var urlArray:Array = new Array();
		public var canPlay:Boolean = false;
		public var count:int = 0;
 
		public function MultipleSoundPlayer() 
		{
			ExternalInterface.addCallback("loadAudio", loadAudioFiles);
			ExternalInterface.addCallback("playAudio", playAudioFile);
			ExternalInterface.addCallback("stopAudio", stopAudioFile);
			ExternalInterface.call("askForVars",null);
		}
 
		public function playAudioFile(i:Number):void
		{
			if(soundArray[i] && canPlay)
			{
				var sndToPlay:Sound = soundArray[i];
				myChannel.stop();
				myChannel = sndToPlay.play(0);
			}
			else if(!canPlay)
			{
				ExternalInterface.call("notLoadedError",null);
			}
			else if(!soundArray[i])
			{
				ExternalInterface.call("outOfRangeError",null);
			}
		}
 
		public function stopAudioFile():void
		{
			myChannel.stop();
		}
 
		public function loadAudioFiles(arr:Array):void
		{
			var ar:Array = arr
 
			try
			{
				for(var i:int;i<ar.length;i++)
				{
					createSound(ar[i]);	
				}	
			} 
			catch (e:Error)
			{
				ExternalInterface.call("audioArrayInputError",null);
			}
 
			loadRequests();	
		}
		public function createSound(s:String):void
		{
			var snd:Sound = new Sound();
			soundArray.push(snd);
			urlArray.push(s);
		}
		private function completeHandler(e:Event):void
		{
			soundArray[count].removeEventListener(Event.COMPLETE,completeHandler);
			count++;
			loadRequests();
		}
		public function loadRequests():void
		{
			if(count < soundArray.length)
			{
				soundArray[count].load(new URLRequest(urlArray[count]));
				soundArray[count].addEventListener(Event.COMPLETE,completeHandler);		  
			}
			else
			{
				canPlay = true;
				ExternalInterface.call("soundsLoaded",null);
			}
		}
 
	}
}

Całość spakowana zipem jest dostępna do pobrania z tego adresu. W środku zipa znajdują się również przykładowe dźwięki, osadzenie Flasha oraz funkcje JavaScript potrzebne do prawidłowego funkcjonowania.

AS3 Multiple Sound Player jest wydany na licencji MIT, zatem zachęcam do jego modyfikowania i używania w każdego rodzaju projektach. Warunek jest jeden. Proszę o umieszczenie informacji o autorze wraz z linkiem do tej stronki.

Problemy z długością tekstu we Flashu

Posted on Grudzień 14, 2009 by d(O_o)b

Pracując nad ostatnim projektem napotkałem bardzo dziwnego buga we Flashu. Problem dotyczy długości tekstu dla pola w którym zmieniono kerning. Napisałem w AS3 taką regułkę, która nie wiadomo czemu nie chciała działać:

ta.addEventListener(Event.CHANGE, taFieldChangeHandler);
private function taFieldChangeHandler(event:Event):void
{
	if ('' != event.currentTarget.text )
	{
		trace("Text is not null")
 
	}
	else
	{
		trace("Text is null")
	}
 
}

Nie miałem pojęcia dlaczego Flash zawsze wyświetlał mi trace: Text is not null, mimo tego że pole do wprowadzania tekstu było puste. Po niespełna godzinie różnych prób i testów, zirytowany problemem postanowiłem zajrzeć do pliku Flasha, ponieważ instancja pola tekstowego była tworzona z poziomu pliku fla. I eureka. Zauważyłem, że moje pole miało zmieniony kerning (albo inaczej letter spacing) na -0.5. Wartość ta została ustawiona przez innego designera, od którego dostałem pliki źródłowe. Kiedy ustawiłem tą wartość na 0 kod w końcu zaczął poprawnie działać.

Nie wiadomo mi, czy jest jakiś Workaround dla tego buga. Może gdybym miał trochę więcej czasu udało by mi się coś wykombinować, ale ostatecznie ustawiłem kerning na 0 i dałem sobie spokój. Próbowałem też wyciągnąć wartość pola do zmiennej i następnie porównywać tą zmienną, lecz efekt był taki sam, jak w przypadku pola tekstowego. Wydaje mi się to dziwne, bo wychodzi na to, że Flash dokleja jakieś dziwne znaki do zmiennych, kiedy letter spacing jest różny od 0, a przecież tak nie powinno być.

Swoją drogą nie jest to pierwszy i na pewno nie ostatni babol z jakim spotkałem się we Flashu. Jeśli ktoś zajmował się troszkę programowaniem w AS3 na pewno zrozumie o co mi chodzi. Nasuwa mi się na myśl jedno pytanie. Dlaczego Adobe wypuszcza kolejne wersje Flasha z nowymi bugami, zamiast skoncentrować się na wydaniu porządnej platformy dla aplikacji webowych ?

Aplikacje na iPhone w Adobe Flash CS5

Posted on Listopad 30, 2009 by d(O_o)b

Właśnie przeglądałem RSS, a tu nagle wpada mi w oko pewien tajemniczy nagłówek o nazwie New tutorial on iPhone development with Flash CS5, a w środku tutorial, w którym stary wyjadacz Lee Brimelow opisuje prosty sposób napisania aplikacji na iPhone’a za pomocą Flasha CS5. Muszę przyznać, że nie mogę się doczekać, kiedy będę mieć możliwość wypróbowania nowych bibliotek na własnym iPhonie i Macu. Znając życie jeszcze poczekamy trochę na CS5
Flash iPhone
Ten krótki tutorial moim zdaniem pokazuje, jak wielką moc może mieć Flash w takich zastosowaniach i pisze tutaj głównie o aspekcie wydajnościowym, bo widać, że aplikacja wcale nie śmiga wolno. Jestem ciekaw, ile linii kodu trzeba byłoby napisać w Objective-C/Cocoa, żeby uzyskać podobny efekt? Oby tak dalej. Fajnie, że będe mógł w końcu napisać jakiś soft, który będę wykorzystywał na swoim telefonie. Cieszy mnie również fakt, że Apple w końcu doszło do porozumienia z Adobe, jeśli chodzi o kwestie Flasha na iPhone, bo przecież wiadomo, że firma od CS5 będzie miała niemałe wpływy w AppStore.

Metadata

www z innej perspektywy

Category Archives: Flash