Illustrated, open domain eBooks that read themselves! (A mash-up between Project Gutenberg and Librivox.)
Projection Gutenberg is a digital library of open domain books. The volunteers at the project confirm that a book’s copyright has expired and that the book is in the open domain. Then the book is digitized and made into a few different eBook formats.
The sister project of Librivox does the same thing, but with audio.
In my research of Open Educational Resources and my own trails of creating a usable repository for an LMS, I thought that it would be natural to mash-up the respectable projects to create eBooks with embedded audio.
The example below will be using HTML. Ideally, I would be making an .epub file to share with the new epub3 version that supports video and audio tags, but unfortunately, many platforms and devices do not support epub3 yet.
Technically speaking, I could make an epub3 version of Peter Rabbit with embedded audio, but only under specific technical environments would users be able to have the audio play or ‘open’ the book. So not much point in making a book that, currently, no own could read, hence the HTML version.
I chose a short book for this example, The Tale of Peter Rabbit by Beatrix Potter.
The HTML files and images are zipped here.
(Permalink for the Tale of Peter Rabbit here.)
The mp3 file is here.
Both projects add the license and other important info at the beginning of their eBooks and audio books, unfortunately this extra text and audio may be confusing for young readers or students, therefore I hid or moved the extra bits.
eBook: Using TextWrangler or Notepad++ just open the HTML file and uncomment the lines of code that you don’t want displayed. Starting with the <pre>, </pre> is good.
Audio book: I used Audacity to just clip and move the audio license to the end of the mp3 file.
html code to use
1. Uncommenting lines of HTML code. This means we will hide the text that we don’t want the reader to see. The text will still be there and is still accessible. I hid the additional text at the beginning of the eBook, extra images, and the license at the bottom.
<!–Text between here will disappear when viewed in a browser.–>
2. Adding the audio. Paste the code before the starting text of the eBook. Add the correct file name (URL of the file on WordPress) to the “FILENAMEHERE.mp3 line.
<div class=”fixed” align=”center”>
<audio controls>
<source src=”FILENAMEHERE.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
</div>
WordPress notes
In my personal LMS, I could quickly edit the HTML code (Text Wrangler Find=>Replace) and then upload a zipped archive that contained the HTML file, images and mp3. Once unzipped, the eBooks would display fine, however, WordPress is not just displaying the HTML code that I am copying and pasting here, so I had to resize the images, and redo the URLs pointing to the image files and audio file. Another reason why a shared repository would be a better and easier long-term solution.
CSS: Used the WP Add Custom CSS plugin to get the correct CSS style for the later fixed position of the audio player. (If you want to know more, see CSS layout)
Code was:
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 38%;
border: 3px solid #808080;
}
</style>
THE TALE OF
PETER RABBIT
BY
BEATRIX POTTER
Once upon a time there were four little Rabbits, and their names were— Flopsy, |
![]() |
They lived with their Mother in a sand-bank, underneath the root of a very big fir-tree. |
![]() |
‘Now my dears,’ said old Mrs. Rabbit one morning, ‘you may go into |
![]() |
‘Now run along, and don’t get into mischief. |
![]() |
Then old Mrs. Rabbit took a basket and her umbrella, and went through the wood to the baker’s. She bought a loaf of brown bread and five currant buns. |
![]() |
Flopsy, Mopsy, and Cotton-tail, who were good little bunnies, went down the lane to gather blackberries: |
![]() |
But Peter, who was very naughty, ran straight away to Mr. McGregor’s |
![]() |
First he ate some lettuces and some French beans; and then he ate |
![]() |
And then, feeling rather sick, he went to look for some parsley. |
![]() |
But round the end of a cucumber frame, whom should he meet but Mr. McGregor! |
![]() |
Mr. McGregor was on his hands and knees planting out young cabbages, |
![]() |
Peter was most dreadfully frightened; he rushed all over the garden, He lost one of his shoes among the cabbages, and the other shoe |
![]() |
After losing them, he ran on four legs and went faster, so that I |
![]() |
Peter gave himself up for lost, and shed big tears; but his sobs were |
![]() |
Mr. McGregor came up with a sieve, which he intended to pop upon the |
![]() |
And rushed into the tool-shed, and jumped into a can. It would have |
![]() |
Mr. McGregor was quite sure that Peter was somewhere in the tool-shed, Presently Peter sneezed—’Kertyschoo!’ Mr. McGregor was after him in no time. |
![]() |
And tried to put his foot upon Peter, who jumped out of a window, |
![]() |
Peter sat down to rest; he was out of breath and trembling with fright, and he had not the least idea which way to go. Also he was very damp with sitting in that can. After a time he began to wander about, going lippity—lippity—not very fast, and looking all round. |
![]() |
He found a door in a wall; but it was locked, and there was no room An old mouse was running in and out over the stone doorstep, carrying |
![]() |
Then he tried to find his way straight across the garden, but he |
![]() |
He went back towards the tool-shed, but suddenly, quite close to him, |
![]() |
Peter got down very quietly off the wheelbarrow; and started running Mr. McGregor caught sight of him at the corner, but Peter did not care. |
![]() |
Mr. McGregor hung up the little jacket and the shoes for a scare-crow Peter never stopped running or looked behind him till he got home to the big fir-tree. |
![]() |
He was so tired that he flopped down upon the nice soft sand on the |
![]() |
I am sorry to say that Peter was not very well during the evening. His mother put him to bed, and made some camomile tea; and she gave a ‘One table-spoonful to be taken at bed-time.’ |
![]() |
But Flopsy, Mopsy, and Cotton-tail had bread and milk and |
THE END