Creating your own eBook with audio

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>

 Now users can scroll down as they read and still be able to start or stop the audio book too. (Works best in Firefox47, IE11, Safari9 doesn’t display the amount played of the mp3, not sure about Chrome at the moment.)

THE TALE OF

PETER RABBIT

BY

BEATRIX POTTER

Peter Rabbit

Once upon a time there were four little Rabbits, and their names were—

Flopsy,
Mopsy,
Cotton-tail,
and Peter.

Rabbit family home

They lived with their Mother in a sand-bank, underneath the root of a very big fir-tree.

Mother gives a warning

‘Now my dears,’ said old Mrs. Rabbit one morning, ‘you may go into
the fields or down the lane, but don’t go into Mr. McGregor’s garden:
your Father had an accident there; he was put in a pie by Mrs.
McGregor.’

Be good little bunnies

‘Now run along, and don’t get into mischief.
I am going out.’

Mrs. Rabbit goes shopping

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.

Bunnies picking berries

Flopsy, Mopsy, and Cotton-tail, who were good little bunnies, went down the lane to gather blackberries:

Bad boy Peter

But Peter, who was very naughty, ran straight away to Mr. McGregor’s
garden, and squeezed under the gate!

Peter pigs out

First he ate some lettuces and some French beans; and then he ate
some radishes;

Peter ate too much

And then, feeling rather sick, he went to look for some parsley.

Peter is discovered

But round the end of a cucumber frame, whom should he meet but Mr. McGregor!

McGregor chases Peter

Mr. McGregor was on his hands and knees planting out young cabbages,
but he jumped up and ran after Peter, waving a rake and calling out, ‘Stop thief!’

Peter loses his shoes

Peter was most dreadfully frightened; he rushed all over the garden,
for he had forgotten the way back to the gate.

He lost one of his shoes among the cabbages, and the other shoe
amongst the potatoes.

Peter is caught in a net

After losing them, he ran on four legs and went faster, so that I
think he might have got away altogether if he had not unfortunately
run into a gooseberry net, and got caught by the large buttons on his
jacket. It was a blue jacket with brass buttons, quite new.

Sparrows offer advice

Peter gave himself up for lost, and shed big tears; but his sobs were
overheard by some friendly sparrows, who flew to him in great
excitement, and implored him to exert himself.

Peter escapes McGregor

Mr. McGregor came up with a sieve, which he intended to pop upon the
top of Peter; but Peter wriggled out just in time, leaving his jacket behind him.

Peter chooses a wet place to hide

And rushed into the tool-shed, and jumped into a can. It would have
been a beautiful thing to hide in, if it had not had so much water in it.

'Kertyschoo!'

Mr. McGregor was quite sure that Peter was somewhere in the tool-shed,
perhaps hidden underneath a flower-pot. He began to turn them over carefully, looking under each.

Presently Peter sneezed—’Kertyschoo!’ Mr. McGregor was after him in no time.

Peter tips over pots

And tried to put his foot upon Peter, who jumped out of a window,
upsetting three plants. The window was too small for Mr. McGregor, and
he was tired of running after Peter. He went back to his work.

Peter looks around for the exit

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.

Peter asks the mouse

He found a door in a wall; but it was locked, and there was no room
for a fat little rabbit to squeeze underneath.

An old mouse was running in and out over the stone doorstep, carrying
peas and beans to her family in the wood. Peter asked her the way to
the gate, but she had such a large pea in her mouth that she could not
answer. She only shook her head at him. Peter began to cry.

Peter encounters a cat

Then he tried to find his way straight across the garden, but he
became more and more puzzled. Presently, he came to a pond where Mr. McGregor filled his water-cans. A white cat was staring at some
gold-fish, she sat very, very still, but now and then the tip of her
tail twitched as if it were alive. Peter thought it best to go away
without speaking to her; he had heard about cats from his cousin,
little Benjamin Bunny.

Peter finds a vantage point

He went back towards the tool-shed, but suddenly, quite close to him,
he heard the noise of a hoe—scr-r-ritch, scratch, scratch, scritch.
Peter scuttered underneath the bushes. But presently, as nothing
happened, he came out, and climbed upon a wheelbarrow and peeped over.
The first thing he saw was Mr. McGregor hoeing onions. His back was turned towards Peter, and beyond him was the gate!

Peter dashes for the gate

Peter got down very quietly off the wheelbarrow; and started running
as fast as he could go, along a straight walk behind some black-currant bushes.

Mr. McGregor caught sight of him at the corner, but Peter did not care.
He slipped underneath the gate, and was safe at last in the wood outside the garden.

Scare-crow of rabbit clothes

Mr. McGregor hung up the little jacket and the shoes for a scare-crow
to frighten the blackbirds.

Peter never stopped running or looked behind him till he got home to the big fir-tree.

Peter is back home

He was so tired that he flopped down upon the nice soft sand on the
floor of the rabbit-hole and shut his eyes. His mother was busy
cooking; she wondered what he had done with his clothes. It was the
second little jacket and pair of shoes that Peter had lost in a fortnight!

Petered out

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
dose of it to Peter!

‘One table-spoonful to be taken at bed-time.’

Eating the berries they picked

But Flopsy, Mopsy, and Cotton-tail had bread and milk and
blackberries for supper.

THE END

 

This entry was posted in Education Hacks and tagged , , , , , , , , , . Bookmark the permalink.