Introduction

Fandango Audio Player is jQuery based streamer for audio files, initially developed for streaming of audio books from The Digital Library of Macedonia. It uses jQuery and jQuery UI (both versions 1.9.1), Boostrap 3.3.0 for responsive layout and Font Awesome 3.2.1 for player controls. Additionally, it uses jQuery XML to JSON Plugin for parsing dublin_core.xml and jQuery Hotkeys for keyboard control over the player.

For full list of supported features, please check out API Reference Documentation.



Installation

Include CSS files in the <head> of the document.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css">
<!-- Your Theme of choice. Choose between Flat, Dark and Light. Default is DARK -->
<link href="/css/dark.css" rel="stylesheet" type="text/css">

Include JavaScript files before the closing </body> tag.

<!-- Load jQuery and jQuery UI -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js">
<script type="text/javascript" src="//code.jquery.com/ui/1.9.1/jquery-ui.min.js">
<!-- Additional plugins for Metadata and keyboard shortcuts -->
<script type="text/javascript" src="/js/jquery.hotkeys.js">
<script type="text/javascript" src="/js/jquery.xml2json.js">
<!-- Only if you use transcription with VTT files -->
<script type="text/javascript" src="/js/vtt.js">

And finally load and activate the plugin.

<!-- Load Fandango player -->
<script type="text/javascript" src="/js/fandango.min.js">
<!-- Initialize the player -->
<script type="text/javascript">
$(document).ready(function({
$('.audioPlayer').audioPlayer({
//your options go HERE
});
});

 

Accessibility

We worked very hard to make Fandango Audio pLayer as accessible as possible. It utilizes role and aria attributes extensively, that helps to make it more accessible when using screen readers. The player was tested in the Department for blind and visually impaired at National and University Library "St. Clement of Ohrid" - Macedonia.


 

Metadata

Since this player was initially developed as DSpace plugin for hosting audio books, the directory structure along with file name and formating of XML document are per DSPace 4.x Documentation. The schema used is Qualified Dublin Core (DCMI - metadata terms) with custom field for narrators of audio books. You may use additional fields, but those will be ignored in the output. For full set of metadata terms see here: http://dublincore.org/documents/dcmi-terms/

Sample dublin_core.xml file for audio book:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<dublin_core schema="dc">
    <dcvalue element="title" qualifier="none" language="en">The Adventures of Sherlock Holmes</dcvalue>
    <dcvalue element="contributor" qualifier="author" language="en">Sir Arthur Conan Doyle</dcvalue>
    <dcvalue element="contributor" qualifier="narrator" language="en">Mark Smith</dcvalue>
    <dcvalue element="subject" qualifier="none" language="en">Action & Adventure Fiction</dcvalue>
    <dcvalue element="subject" qualifier="none" language="en">General Fiction</dcvalue>
    <dcvalue element="subject" qualifier="none" language="en">Detective Fiction</dcvalue>
    <dcvalue element="description" qualifier="none" language="en">Dr. Watson chronicles here some of the more interesting detective cases that he and his good friend, Mr. Sherlock Holmes, have encountered during their association. We see the cases unfold as he does, scratch our heads as does he while the evidence is collected, and then marvel at the impeccable observations, remarkable insight, and doggedness which Holmes displays as he teases apart the tangled clues.</dcvalue>
    <dcvalue element="description" qualifier="tableofcontents" language="en">A Scandal in Bohemia;The Red-Headed League;A Case of Identity</dcvalue>
    <dcvalue element="date" qualifier="issued" language="">2010-07-31</dcvalue>
    <dcvalue element="publisher" qualifier="none" language="en">LibriVox</dcvalue>
    <dcvalue element="language" qualifier="iso" language="en">en</dcvalue>
    <dcvalue element="identifier" qualifier="uri" language="">http://www.example.com/YOUR_AUDIO_BOOK</dcvalue>
    <dcvalue element="identifier" qualifier="isbn" language="">XXXXXXXXXXXXXXXX</dcvalue>
    <dcvalue element="type" qualifier="none" language="en"> Audio book</dcvalue>
</dublin_core>

The playlist is generated from dc.description.tableofcontents with semicolon as delimiter, in ordered list like this:

1. A Scandal in Bohemia
2. The Red-Headed League
3. A Case of Identity

 

Directory Structure

When the playlist is generated, it matches the first item from list with the first audio file in ascending order. If you want to use audio transcription, then the MP3 file and the matching VTT file must have same name. Here is a sample directory structure:

audio_files/
├── book/
│   ├── 0000001.mp3
│   ├── 0000001.vtt
│   ├── 0000002.mp3
│   ├── 0000002.vtt
│   ├── 0000003.mp3
│   ├── 0000003.vtt
│   └── dublin_core.xml
└── music/
    ├── 0000001.mp3
    ├── 0000001.vtt
    ├── 0000002.mp3
    ├── 0000002.vtt
    ├── 0000003.mp3
    ├── 0000003.vtt
    └── dublin_core.xml

 

SEO

Fandango is a Search engine Friendly audio player due to parsing of metadata explained above. If pageMeta: true and microdata: true, the HTML output should look like this:

For HTML Head Elements:

<title>The Adventures of Sherlock Holmes by Sir Arthur Conan Doyle</title>
<link rel="canonical" href="http://www.example.com/YOUR_AUDIO_BOOK" />
<meta name="description" content="Dr. Watson chronicles here some of the more interesting detective cases that he and his good friend, Mr. Sherlock Holmes, have encountered during their association. We see the cases unfold as he does, scratch our heads as does he while the evidence is collected, and then marvel at the impeccable observations, remarkable insight, and doggedness which Holmes displays as he teases apart the tangled clues.">
<meta name="keywords" content="Action & Adventure Fiction, General Fiction, Detective Fiction">

For Microdata:

<div itemscope itemtype="http://schema.org/Audiobook">
    <p>Title: <span itemprop="title">The Adventures of Sherlock Holmes</span></p>
    <p>Author: <span itemprop="author">Sir Arthur Conan Doyl</span></p>
    <p>Narrator: <span itemprop="readBy">Mark Smith</span></p>
    <p>ISBN: <span itemprop="isbn">XXXXXXXXXXXXXXXX</span></p>
    <p><span itemprop="datePublished">2010-07-31</span></p>
    <p><span itemprop="publisher">LibriVox</span></p>
</div>

NOTICE: At this moment only microdata profile for Audio books is supported. Other profiles are on our TO DO list.


 

Web Speech API

Speech recognition is done using Web Speech API. For optimal results there are few things to consider: microphone quality, network latency, pronunciation etc... Browser support is also very limited. To enable this feature, use:

webAudio: true,

WARNING: This feature is in experimental stage. Use at your own RISK!!!

For unofficial list of supported languages see here


 

Browser support

  • Internet Explorer 10+
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

 

Screen Readers support

  • JAWS 15 on Windows 7
  • TalkBack on Android 4.2 (Jelly Bean)