Daisy Web Player, Version 13.06-RC2 (June 27th, 2013)
1. Foreword
Nearly one year after our last release, we release this new version of the software.
This version is a complete redesign.
We had to find solutions to be environment independent.
We also had some feedback in which it appeared that there were issues with mobile iOS devices.
We discovered two major software pieces that helped us in this refactoring process:
o) jPlayer, a completely free and open source (MIT) media library written in JavaScript.
o) Twitter Bootstrap, sleek, intuitive, and powerful front-end framework for faster and easier web development.
The result is a fluid and responsive user interface, the use of the HTML5 audio tag, a transparent flash fall-back for older browsers.
2. Special thanks
For support: Association pour le Bien des Aveugles et malvoyants, Geneva, Switzerland
For testing, feedback, critics and suggestions: Gerton Cazemier, Gregory Kearney
For providing iPad devices: Association pour le Bien des Aveugles (CIR), Eric Harth
3. Introduction
Daisy Web Player (DWP hereafter) is a software that allows to open audio documents structured according to the DAISY (2.02) standard and to play them in a web browser.
A first development of such a software has been done by Charles L.Chen under the name "CLC Dandelion" (see http://dandelion.clcworld.net).
This project seems to be inactive since 2008, but it gave us ideas to start this development.
There is a commercial product named Daisy Web Player which can be seen at http://daisy.dynamic-designer.de.
DWP has been developed for the "Association pour le Bien des Aveugles et malvoyants" (ABA, Association for the blind and visually impaired people) in Geneva, switzerland (http://www.abage.ch).
DWP uses the jPlayer javascript library which is released under the MIT License (MIT) license (http://opensource.org/licenses/MIT).
The styling of the user interface is done with the Twitter Bootstrap framework (http://twitter.github.io/bootstrap/).
The code has been written by Martin Mohnhaupt, Nice Data Systems, La Plaine, Switzerland (mailto:m.mohnhaupt@bluewin.ch, http://www.nicedata.ch).
The player can be seen and operated at http://www.daisyplayer.ch.
For those who wish to install the player on their own web sites, please get the latest release at sourceforge (http://sourceforge.net/projects/daisywebplayer).
Support for installation can be provided by Nice Data Systems (commercial).
4. Licensing
This product is released as Open Source under the GPL license (see http://en.wikipedia.org/wiki/GNU_General_Public_License).
Donations to the "Association pour le Bien des Aveugles" at http://www.abage.ch/aba/ch/fr-ch/index.cfm?page=/aba/home/don_en_ligne#content are most welcome !
5. What is new ?
Version 13.06-RC2 (27 june 2013)
Maintenance release !
+ Various bugs fixed (See NOTES)
+ Bookmark support enable/disable
Version 13.06-RC1 (07 june 2013)
+ New user interface
+ Menus to minimize screen occupation
+ Use of WAI/ARIA attributes
+ Responsive design (all screen resolutions)
+ Change of the playback rate (if pure HTML5 is supported)
+ Code re-factored
+ Now works with Safari Mobile (iPhone, iPad)
+ Bookmark (the current book parameters are saved to the localStorage (if supported)
+ Use of js for the configuration definition (no more xml)
Version 12.05-1 (june 2012)
+ Corrected a bug in smil processing (par/seq/audio)
Version 12.05 (may 2012)
+ Processing/code optimizations
+ GUI redesign (use of jquery UI)
+ Phrase navigation
+ Page navigation
+ Notes navigation
+ Production notes navigation
+ Book meta data display
+ Text highlighting with zoom effect
6. Important files
jPlayer and jQuery are needed.They may be installed locally (/js folder) or loaded from a repository.
jQuery: http://code.jquery.com/jquery.min.js
jPlayer: http://www.jplayer.org/latest/js/jquery.jplayer.min.js
See daisywp.html.
Note: The media files (DAISY books) must also reside on your web site if cross-domain is disabled.
6.1 In the / (site root) folder
daisywp.html - The main page where the GUI is defined and the scripts are loaded.
books.html - Bookshelf (links to audio books), with abookmarking example.
6.2 In the /js (javascript) folder
daisywp.html - The user interface (html5 document), which contains the initialization code and the elements to display the DAISY document.
daisywp.js - The Engine (jQuery) to deal with various duties like loading data via AJAX, handle user events, refresh the user interface and so on.
daisywp-config.js - The configuration file (js object) with default settings, custom styles, key and actions definitions, internationalization support, etc.
daisylib.js - Classes to handle NCC, SMIL files
yaaow.js - Class to deal with jPlayer and to provide high-level methods and properties (enqueue, play, pause, abort, etc...)
extensions.js - Some useful jQuery and Javascript extensions
google-analytics.js - Code for Google Analytics (if needed)
proxy.php - Cross-domain proxy.Requires PHP to be active on the server.
6.3 In the /bootstrap folder
Files needed by the boostrap framework.
6.4 Folder structure (example)
In our case, we have a folder structure like this:
/opt/www/dwp
├── books.html (sample bookshelf, links to online books, bookmark display)
├── proxy.php (PHP script for cross-domain requests)
├── daisywp.html (user interface)
├── index.html (index page, links to DAISY books)
├── index.php (redirector to index.html, may be needed)
├── bootsrap
│ └── (twitter bootstrap files)
├── img
│ └── dwp-logo.jpg (our logo :-))
└── js
├── daisywp-config.js (Configuration)
├── daisywp.js (Player javascript engine)
├── daisylib.js (Daisy classes)
├── yaaow.js (Player classes)
├── extensions.js (Extensions)
├── google-analytics.js (Google Analytics code)
└── *.min.js (Minimzed javascript files for production)
To set up DWP in your specific environment, you will have to edit the daisywp.html file (script pathes).
7. Operation
To open a DAISY book, we just need to load the daisywp.html file with a parameter that tells where the main DAISY file (ncc.html) resides:
http://www.daisyplayer.ch/daisywp.html?ncc=www.nicedata.ch/media/book1/ncc.html&lang=iso_code
The ncc parameter holds the path to the DAISY book main file. Opening this URL will do all operations (load the needed javascripts, load the DAISY document, set up the user interface.
A second parameter (&lang=) allows to specify the GUI language to be used and also to specify the page language (for page readers).
Currently, French German and English are supported, but you can adapt the daisywp-config.js file to support your language too.
The parameter value simply is the country ISO 639-2 code (fr, de, en,...).
The default language is English.
Note: On mobile devices (Tablets, Smartphones) a touch event is needed to start playback.An alert is fired to inform the user.
8. Try it without installation !
You can use the latest version of the player without installing it, either by setting up the appropriate links on your site, or interactively via our web interface at http://www.daisyplayer.ch.
10. GUI characteristics
10.1 Layout
In order to minimize the screen occupation (mobile devices!), we put a menu on the top of the page.
Below the menu, there is the focused text zone in which the current phrase (plain text documents) is displayed (and possibly magnified).
On the bottom of the page, there are 3 indicators (ARIA role = status):
- Current navigation level
- Current clip position (MM:SS of MM:SS total time)
- Current playrate
- Busy indicator (hidden when idle)
10.2 Menu structure
10.2.1 View...
Select between "Player" (currently spoken phrase) and "Text" (Book text).
10.2.2 Book
See Sections structure (clickable), Page numbers (clickable), Notes (clickable), Production Notes (clickable) and Properties (book meta data).
10.2.3 More...
About displays the program infos (Copyrignt, jPlayer version, ...)
Bookshelf allows to activate the bookshelf URL
10. Customization
You can partly customize the Daisy Web Player via the daisywp-config.js configration file.
10.1 general
- lang: 'en' (language ISO code) [string]
- playbackRate: 1 (Playback rate [real, 1 to 4]
- levelFilter: 0 (Section level filter [integer, 0 to 6, 0 means no filtering)
- proxyUrl: 'http://dev.daisyplayer.ch/proxy.php?url=' (Proxy URL [string, can be empty.The ?url parameter is MANDATORY when URL set]
- volume: 50 (Volume [integer, 0 to 100]
- bookshelfUrl: 'http://dev.daisyplayer.ch/books.html' (Bookshelf URL [string, can be empty]
- textMagnify: true (Text magnification [boolean, true/false]
10.2 css
- audioContainer: '#audio_container', (Audio container CSS id as defined in daisywp.html)
- textZone: '#fulltext', (Full text zone CSS id as defined in daisywp.html)
- focusZone: '#textfocus' (Focused text zone CSS id as defined in daisywp.html)
10.3 styles
Array to set up styles you may want to use.These styles are dynamically integrated into the daisywp.html file.
Example:
styles: [
'.highlight {font-weight: bold; background: yellow}',
'.magnify {font-weight: bold; background: yellow; font-size: xx-large; line-height: 1.5em}',
'.badge, .label {width: 8em; text-align: center}',
'.accessibility {position: absolute !important; top: -9999px !important; left: -9999px !important;}',
'.debug {display: none}'
]
10.4 keys
This section allows to attach actions to keyboard (keydown) events.
- name: Name of the key.The use of a self-speaking name is highly recommended!
- code: The code of the key.
- modifier: 's' - shift key pressed, 'c' - control key pressed, 'a' - alt key pressed key pressed
- action: action to be launched.See ACTIONS.
Example:
keys: {
PageUp: {modifier: '', code: 33, action: 'PLAY_FORWARD'},
PageDown: {modifier: '', code: 34, action: 'PLAY_REWIND'},
ArrowUp: {modifier: '', code: 38, action: 'LEVEL_INCREASE'},
....more....
}
10.5 buttons
This section allows to attach actions to button (click) events.
- id: id of the button.This is the CSS id in the GUI.!!! If changed, you'll have to modify the js and css code!!!
- visible: true | false – show/hide in the GUI.
- action: action to be launched.See ACTIONS.
Example:
buttons: {
dwpBtnFirst: {visible: true, action: 'PLAY_FIRST_SECTION'},
dwpBtnPrev: {visible: true, action: 'PLAY_PREVIOUS_SECTION'},
dwpBtnToggle: {visible: true, action: 'PLAY_TOGGLE'},
dwpBtnAbort: {visible: true, action: 'PLAY_ABORT'},
....more....
}
10.6 i18n - internationalization
Internalization section.The labels refer to the CSS id!
On ids that refer to clickable elements (buttons), an accesskey attribute may be defined !
Example:
i18n: {
dwpMsgTouchScreen: {
en: {label: 'Touch the screen to begin !'},
fr: {label: 'Toucher l\'écran pour démarrer !'},
de: {label: 'Berühren Sie den Bildschirm, um zu beginnen !'}
},
dwpMsgNoBookError: {
en: {label: 'Error: no book !'},
fr: {label: 'Erreur: pas de livre !'},
de: {label: 'Fehler: kein Buch !'}
},
dwpViewList: {
en: {label: 'View...', accesskey: 0},
fr: {label: 'Voir...', accesskey: 0},
de: {label: 'Sehen...', accesskey: 0}
},
....more....
}
10.7 Actions
Action values are CaSe-SeNsItIvE ! Here is a list of all possible actions or functions:
Value Action
----- ------
(Empty string) Do nothing, don't even think about handling this item !
----- Section navigation -----
PLAY_NEXT Play next section (within a level)
PLAY_PREVIOUS Play previous section (within a level)
PLAY_CURRENT Play current section (re-play)
PLAY_FIRST Play first section (within a level)
PLAY_LAST Play last section (within a level)
----- Playback -----
PLAY_TOGGLE Play / Pause (toggle)
PLAY_FORWARD Fast forward (5 seconds)
PLAY_REWIND Fast rewind (5 seconds)
PLAY_ABORT Abort playing
----- Volume -----
VOLUME_LOUDER Increase playback volume
VOLUME_SOFTER Decrease playback volume
----- Level filtering -----
LEVEL_INCREASE Increase the navigation level
LEVEL_DECREASE Decrease the navigation level
LEVEL_CLEAR Clear navigation level filtering
----- Play rate control -----
PLAY_SPEED_INCREASE Increase playback speed (0.5 unit)
PLAY_SPEED_RESET Reset playback speed (to 1)
11. Final word
E N J O Y !!!
