Adding Audio and Video to EPUB eBooks for iPad

In this example we will add two audio files to the eBook titled Jupiter and Mars (see this page for discussion of how this eBook was created). The Sigil software provides a convenient means for creating eBooks, but it does not include a method to incorporate audio or video into an eBook. After the eBook is produced using Sigil, the method described here can be used to add audio and/or video to the eBook.

1. Organize your work by placing media files and the eBook file in the same folder. In this example, there are two audio files (.mp3) to be embedded into the eBook.

image

 

 

2. An .epub file is actually an archive file, the same as a .zip file. In order to add the media files into the eBook, we must first change the file extension from .epub to .zip. Right-click on the .epub file and select Rename in the context menu.

image

 

2 (continued). Replace the .epub extension with .zip

image

 

3. When the warning below appears, click Yes (this will not harm the file)

image

 

4. Open the zip file

image

 

5. Note that there are two folders and a file named mimetype inside the zip archive. Open the folder OEBPS.

image

 

6. Inside OEBPS open the Text folder

image

 

7. Note that there are two .xhtml files (0001 is Jupiter and 0002 is Mars). These files need to be edited to incorporate the audio. But you can't edit a file inside a zip archive. Therefore, copy these files and paste them outside the archive.

image

 

8. Now that we have copies of our text files outside the archive, we can edit them. In the example here, Adobe Dreamweaver is used to edit the files. You can use Notepad as well, but it may be difficult to follow the coding. Another alternative is to use the free software, Notepad++, which is a good alternative to Dreamweaver in this case. Now open Section0001.xhtml with the editor of your choice (Dreamweaver, Notepad++, etc.).

image

 

9. It helps at this point if you know a little about the HTML code used for creating web pages. The screen shot below is the "Code" view in Dreamweaver. Note that the first paragraph of text starts with the <p> paragraph tag. After the first paragraph, the <img> tag is used to insert the image. We would like to add our audio file into the code just after the first paragraph.

image

 

10. If you are using a WYSIWYG editor like Dreamweaver, you can switch to the "Design" view to enter some text.

image

 

11. Add the text to accompany the audio (Listen to this audio......)

image

 

12. Switch back to Code view. Now, under the text just added, we will enter the code for the audio: <audio src="En-us-Jupiter.mp3" controls="controls">here you put text to appear when the audio is not supported by the particular eBook reader software</audio> The part in double quotes after src= is the file name of the audio to be embedded. The <audio> tags must be coded exactly as done here. After editing the file to include the audio, save the file.

image

 

13. Repeat steps 10 through 12 to add the second audio file to the page for Mars. You are now ready to incorporate the audio files and edited .xhtml files into the zip file (in our example, the files listed in illustration below). Copy all of these files back into the Text folder of the zip file (in the case of the .xhtml files you will be replacing the ones in the zip with the edited files). Then rename the zip file with the extension .epub and you are finished. Video can be incorporated into an eBook with the same method, just substitute the <video> and </video> tags for the audio tags. The video must be in .m4v format.

image

 

The image below is our eBook with embedded audio. Touch the white arrow on the black horizontal bar to play the audio.

image

 

 

If you would like to try out this eBook, load this page in Safari on your iPad and touch the link below. When prompted, open it in iBooks

Link to eBook with embedded audio