I would like (for every section on each post)
a button near the vertical scroll bar on the right so that
when a visitor mouses over it or clicks on it,
text from that section would be verbally read aloud.
The sound files would be created by Text-To-Speech software
reading markup text.
I haven’t figured it all out yet, but below is what
I’ve found so far.
If you want to skip the drama in the background history,
click here to the solutions.
Early fragmentation
BGSOUND tag
Many of the instructions for “mouseover sound”
show use of playSound and stopSound functions with tags such as:
Adobe Flash
provided cross-browser audio and video functionality
to early HTML4 browsers. But it involved users installing and
updating plug-ins which also provided a vector for viruses.
That’s now 4 different ways to play sound.
Then there’s one more:
Modern audio tag
<audio><sourcesrc="audio/beep.mp3"></source><sourcesrc="audio/beep.ogg"></source>
Your browser isn't invited for super fun audio time.
</audio>
If you want to be annoying, specify:
<audioautoplay>
To provide a player control, add this element:
<audiocontrols>
To provide mouse-over to play, add JavaScript:
// With a name:
var audio = document.getElementsByTagName("audio")[0];
audio.play();
// or with an ID:
var audio = document.getElementById("mySoundClip");
audio.play();
Different File Formats in HTML5
The HTML5 standard spec for browsers includes the
<audio> and <video>
tags built-in, so no plug-in is needed, theoretically.
But due to licensing issues,
different browsers support different file formats.
There are several different audio file formats:
Browser
mid
wav
mp3
mp4
ogg
IE 9+
X
-
X
-
-
Firefox 3.5+
-
X
-
-
X
Chrome 6+
-
-
X
X
X
Safari 5+
-
X
X
X
-
Opera 10.5+
-
X
-
-
X
Since most browsers support more than one format,
only two formats of each file need to be provided on a website to cover all the major browsers out there:
.mp3 and .ogg.
Additionally, Adobe Flash supports its own Real-time file format.
Solutions
SoundManager2
The simplest approach is to make use of
SoundManager2 because it has invisiable fall-back for older browsers
(swf files processed by Adobe Flash plug-ins).
Here are the steps I took to change my
Jekyll site:
Create a tts (text to speech) folder
in your website repo to hold sound files.
The unzipped folder contains all resources for the demo website,
such as index.html, which is not needed.
Copy the swf folder to your website repo.
Only one edition of the .js file is needed
from the script folder.
Copy to your website root folder just
the production-optimized, with debug code removed:
soundmanager2-nodebug-jsmin.js
To the bottom of _scripts.html within
the _includes folder, so it’s included before
</body> at the bottom of page.html.
<script src="soundmanager2-nodebug-jsmin.js"></script><script>soundManager.setup({url:'/swf/',flashVersion:9,// optional: shiny features (default = 8)// optional: ignore Flash where possible, use 100% HTML5 mode// preferFlash: false,onready:function(){// Ready to use; soundManager.createSound() etc. can now be called.}});</script>
QUESTION: Is there a cloud version of SoundManager?
Create a Liquid module
<script>varmySound=soundManager.createSound({url:'/tts/subject-section.mp3'});mySound.play();// play it.</script>
WARNING: Both MP3 and OGG are lossy formats, unlike WAV or FLAC.
So quality will degrade when processed.
PROTIP: During MP3-to-OGG conversion, minimize poor quality in the generated file by using a higher destination bitrate than the source bitrate
For example, for MP3s recorded at 128 kbps, create Ogg using -q7 (variable bitrate level 7), which is usually around ~200 kbps.
To convert mp3 to ogg in batch mode, download the
avconv tarball