Wednesday, June 4, 2014

Free Voice Talent for Your Next ScreenFlow Screencast

Screencasting often entails narration and many screencasters take a do-it-yourself (DIY) approach to this critical part of the screencasting process. The price (free) is usually right and ScreenFlow does a fine job of recoding from an external or built-in microphone. However, there are a few downsides to consider.

  • The quality of the microphone and the recording environment may not be as good as they ought to be.
  • Not everyone has a great “radio voice” and not everyone has a smooth manner of speaking. If that weren’t true, professional voice talent wouldn’t be so expensive.
  • Items A and B often result in having to do many “takes” and that requires time that may not be available or justifiable.
  • Even where the screencaster/narrator has a fine voice, a good recording environment and a great speaking style, there is often a need for a different voice if only to provide variety or counterpoint – important to audience engagement.

These are some of the reasons why screencasters may want to employ additional voice talent instead of or to supplement their own. The show stopper for many is the cost of professional voice talent. The voices.com website provides a good overview of the field and the costs involved.

But wait! There is a free option that only requires that you have and be able to use ScreenFlow on a MacOS X computer. Interested?

As you may already know, MacOS X has a very good text-to-speech engine built-in and ready to use with voices ranging from very human sounding (Alex) to the bizarre (Zarvox). Additional voices organized by language/accent groups can be downloaded from Apple. What’s more, you can purchase and download even more high quality voices from companies such as
Cepstral and AssistiveWare. In most MacOS X apps, one can select a body of text and then choose Edit > Speech >Start Speaking to hear those words spoken with the selected system voice. Selecting a different system voice is a simple matter of using the drop-down menu in the Text to Speech tab of the Dictation & Speech preference pane.

Less well known is the fact that this process can be extended to include creating a recording of such a reading and that this can be automated as a service that is easily accessed in any application that handles text. With narration scripted, it becomes a simple matter to add audio narration to a ScreenFlow screencast in one or more interesting voices.

Before we get into the details of how to do that, let’s take a look at an example that was created using the procedures about to be described. We start with some publicly accessible content so that the reader can follow along. I used Hubblecast 68:
The Hubble Time Machine because it was short (07m 27s), in the public domain, included a script (English) and several subtitle tracks in English and various other languages. I also discovered a great source of free soundtracks in the Zero Project used in this and other Hubblecast epodes.

Of course the video already had world class narration in English so, to make things interesting, I set out to create a Russian narrated version of this video. I used the subtitle track for Russian, a simple text file, to generate a number of audio clips identifiable by the start time of each clip. The original video alternated between a male and female narrators so I chose to mirror that in the Russian version by using two Russian voices, Yuri (male) and Katia (female). These had to be downloaded from Apple as they are not included in the basic set of voices.

So here is our demo, the Russian narrated version of Hubblecast 68: The Hubble Time Machine.



There are a number of flaws in this demo that we’ll address in the how-to section. As a proof of concept, though, it does clearly demonstrate the feasibility of easily adding other voices and other languages to a video.

I added both the English and the Russian subtitles so that you could follow the audio with one or the other. These may be accessible to you if you are looking at the video using the very latest versions of Safari on iOS or MacOS X. The Safari subtitle selector will look like this:

12.subtitle-widget


No other web browsers yet support internal subtitles so if you don't have or use Safari for some reason, download
this version of the video and play it in iTunes, QuickTime X Player, VLC or some other capable video viewer that supports subtitles. Note also that I am using the HTML video tag with MPEG-4 video and no WebM fallback so some versions of Firefox may refuse to play the video because there is no *.webm or *.ogg fallback version. The solution is to switch to any other major web browser.

So, how is this magic achieved? It’s actually pretty easy. Let’s go through the following three easy steps.

Step 1: A more thorough tutorial would have us build the four requisite Automator workflows by hand (you can get that here and here) but automation is not one of our main learning objectives so we’ll take a shortcut and download the four Automator workflows needed for this tutorial here. Once you unpack this archive, you will find four Automator workflows as follows:

1) Read the Selection Aloud (female).workflow
2) Read the Selection Aloud (male).workflow
3) Render Selection as Audio (female).workflow
4) Render Selection as Audio (male).workflow

These are easily installed by double-clicking each of them and then clicking the Install button in the resulting dialog. Note that MacOS X 10.7 and newer
may object saying that the workflow is from an unidentified developer. To circumvent this, Control-click on the workflow file and click Open from the resulting contextual menu. This is a one-time operation so the second and all subsequent uses will require only double-clicking the file. Opening the *.workflow file will yield the following dialog:


01.workflow-install-dialog

Here is a more detailed version of these instructions.

Please note that this security obstacle is very important to protecting your computer and the data handled by it. You should never download and install apps, scripts or Automator workflows from untrusted sources. While apps can be signed by the developer, scripts and Automator workflows cannot. These workflows are from http://www.macosxautomation.com and, so, I considered them trustworthy.


After installing, you'll see a completion dialogue with an Open with Automator button. Click on that to see how each workflow was assembled. The two named “Read the Selection Aloud …” are very simple whereas the two named “Render Selection as Audio …” are more complex as follows:

02.workflow-render-selection


All four workflows come preconfigured with the following voices: Daniel (Male) and Serena (Female). Note the Play button to the right of the selected voice where you may audition it. The language is English (United Kingdom). Feel free to change these as you like or need. For more choices, download additional voices.

Here's how to download new voices from Apple:
• Open System Preferences choosing the Dictation & Speech preference pane and then selecting the Text to Speech tab.
• Click on the System Voice drop down menu selecting Customize ...
• In the resulting dialog, select new voices using the checkboxes to the left of the name of each voice. Note that voices are organized and labeled by language, location (accent) and gender.
• Click on the OK button and, wait patiently for the voice to download. This can take a while.
Once the download is complete, you will be able to select new voices in the Automator workflow as described above.

For the Russian demo, I duplicated, reconfigured and renamed the workflows so that I would have separate services for rendering English and Russian text to speech. It is not at all necessary for you to follow this more complicated procedure. Simply opening the Automator workflows and changing the voice from Daniel to Yuri and from Serena to Katia would have been sufficient. Nonetheless, here's how to do it:

• The Russian voices are not installed by default so have to be downloaded as described above.
• Go to ~/Library/Services where all of your Services are kept. Note that the tilde (~) indicates your Home folder which carries the short username that you chose when your computer was first set up.
• Select the file, "Render Selection as Audio (female).workflow" and duplicate it (Cmd-D or File > Duplicate).
• Rename the duplicated file to reflect its new, specialized function. I used, "Render Selection as Audio (female-Russian).workflow."
• Double-click this file to open it in Automator.
• Change the voice to Katia using the drop down menu in the Text to Audio segment of the workflow and close the file.
• Repeat the process to create "Render Selection as Audio (male-Russian).workflow" using the voice, Yuri.
You will now have both the originally downloaded workflows and these specialized additional workflows available to you in any text handling application that supports Services. To illustrate, here's a screenshot from Pages.


03.render-text-as-audio-service


Step 2: Using the provided script, the subtitle track or other means, create a time stamped working script then use that script to create a set of audio files as follows.

Here is a snippet of the PDF script that I found on the Hubblecast resource page:

01:23
[Narrator]
4. As we can’t travel to other galaxies or star systems and view them for
ourselves, we rely on telescopes like Hubble.
One of the main scientific justifications for building Hubble was to
measure the size and age of the Universe. This task has produced
some of the telescope’s most iconic images, taken as Hubble peered
into the faraway Universe to see what galaxies looked like in the past.
01:56
[Dr. J - STUDIO 2]
5. So how is it possible that Hubble can look into the past?
Well, that’s because, just like a spacecraft, light also travels at a finite
speed. At 300,000 kilometres per second, this speed is very high, but it
is still finite. That means that, in principle, everything we see is a thing of
the past.
Now normally, in our everyday lives, it doesn’t matter, because the
distances are just too small. But when we look at the Moon, we see it as
it was about 1 second ago. The Sun we see as it was about 8 minutes
ago. For the nearest star, it’s about 4 years, and the edge of our galaxy
we see as it was about 100,000 years ago.

The equivalent female (narrator) parts of the subtitle track look like this.

English:

12
00:01:24,000 --> 00:01:30,000
As we can't travel to other galaxies or star systems and view them for ourselves

13
00:01:30,000 --> 00:01:33,000
we rely on telescopes like Hubble.

14
00:01:34,000 --> 00:01:38,000
One of the main scientific justifications for building Hubble

15
00:01:38,000 --> 00:01:43,000
was to measure the size and age of the Universe.

16
00:01:43,000 --> 00:01:48,000
This task has produced some of the telescope's most iconic images,

17
00:01:48,000 --> 00:01:55,000
taken as Hubble peered into the faraway Universe to see what galaxies looked like in the past.


Russian:

12
00:01:24,000 --> 00:01:30,000 NF
И поскольку мы не можем слетать к другим галактикам или звездным системам и посмотреть на них своими глазами

13
00:01:30,000 --> 00:01:33,000
мы полагаемся на телескопы вроде Хаббла.

14
00:01:34,000 --> 00:01:38,000
Одним из главных научных обоснований строительства Хаббла

15
00:01:38,000 --> 00:01:43,000
была необходимости измерить размер и возраст Вселенной.

16
00:01:43,000 --> 00:01:48,000
Эта задача привела к тому, что были созданы самые лучшие изображения,

17
00:01:48,000 --> 00:01:55,000
когда Хаббл вглядывался вглубь Вселенной, чтобы увидеть, как же выглядели галактики в прошлом.


So, that part of our working script for this particular female (narrator) excerpt winds up looking like this:

01:23F
И поскольку мы не можем слетать к другим галактикам или звездным системам и посмотреть на них своими глазами
мы полагаемся на телескопы вроде Хаббла.
Одним из главных научных обоснований строительства Хаббла
была необходимости измерить размер и возраст Вселенной.
Эта задача привела к тому, что были созданы самые лучшие изображения,
когда Хаббл вглядывался вглубь Вселенной, чтобы увидеть, как же выглядели галактики в прошлом.

Next, we select this text in our text editor (almost any text handling app will do) and go to the Services menu (usually in the app menu) selecting one of the following Automator workflows:
• Render Selection as Audio (female) if you have changed the voice of that Automator workflow to Katia.
• Render Selection as Audio (Russian-Female) if you have created a dedicated Automator workflow as I did.

06.services-menu-In-pages


This creates an audio file in QuickTime X Player like this with a title using the first few characters of the selected text.

04.selected-text-rendered-audio

It's auto-saved to disk (~Desktop/Audio Rendering Service/) but we will re-save it to a different location changing the name to 01-23F.m4a to indicate a start time of 1 minute, 23 seconds and the gender of the speaker (as a cross-check because we know they alternate). This filename will be very helpful in placing the audio clip when we get to ScreenFlow.

05.save-as-time-stamp-gender


However, before you start cranking out audio files like sausages, you may want to audition your script with the voices that you are using. This is what the male and female "Read the Selection Aloud ..." workflows are for. It is quite possible that you will not be fully satisfied with the way that that the Text To Speech (TTS) engine treats the selected text. You may want to tweak it a bit. Fortunately, there are ways to influence these readings and, consequently, the recordings too.

The simplest tactics involve mis-spelling words in a more phonetic fashion, using punctuation and issuing commands that the TTS engine will obey such as the silence command. Here is an example where we insert 400 millisecond periods of silence into a sentence:

Don't forget to bring your hat, [[slnc 400]] sunglasses, [[slnc 400]] sandals, [[slnc 400]] and towel.

... compare that to:

Don't forget to bring your hat, sunglasses, sandals, and towel.

... or:

Don't forget to bring your hat; sunglasses; sandals; and towel.

This
Mac Developer Library PDF document is extremely detailed and technical but you can extract from it such usable gems as those in the examples above. Just skip over the stuff that seems too complicated. Table 3-1 is where you want to focus your attention.

Once you have a complete script that reads well, decide how to organize it in segments or chunks that correspond with the gender of the speaker and the pauses that occur naturally as the video plays. An *.srt subtitle file will provide you will all the timing information you need to make sure that the audio corresponds with the video. Finally, go ahead and produce a set of audio files as described above.

Step 3: Using ScreenFlow to assemble the audio narration track and synchronize it to the video.

At this point, you should have a video file and a bunch of audio files whose names tell you where on the timeline they should start. Determine the resolution (width and height in pixels) of your video using QuickTime X Player by opening the video and doing Window > Show Movie Inspector or Cmd-I. Make sure that the video is being displayed at its actual size (View > Actual Size or Cmd-1). The first figure is the width while the second is the height. My example movie (Hubblecast 68) was 1920x1080 which is the resolution of 1080p video.

Open ScreenFlow 4.5, dismiss the configure/start recording dialog that usually opens by default on launch and do File > New Empty Document or Shift-Cmd-N to get the following dialog.

07.screenflow-new-empty-doc


Choose one of the presets or enter custom dimensions to equal the resolution of your video so that it will use all of ScreenFlow's canvas. Next, bring the video file and all of the audio files into ScreenFlow's Media Library using either drag and drop from the Finder or using the Add Media function in the Media Library. Either way, the Media Library should look something like the image below. Note how the names of the audio files cause them to be arranged sequentially. This will help assembly go more smoothly.

08.add-to-media-library


Next, drag the video file onto the canvas and center it. The video should use all of the canvas. Use the scrubber to move the playhead randomly to confirm that fact.

Since we're going to replace the English narration with Russian, we'll need to select the video track in the ScreenFlow timeline and then go to Audio Properties where we can Mute Audio. Play the movie for a few seconds to confirm that it is, indeed, silent. The next and most important task, then, is to begin adding audio files to the timeline such that the narration jibes with the visuals in the video.

Here is where our audio file naming scheme pays off. Because our first audio file is named 00-00F (female narrator starts at 0 minutes, 0 seconds), we know that it should begin to play as soon as the video starts. That's easy so we drag that file to the timeline placing it below the video and as far to the left as possible. If we drag the scrubber/playhead to the beginning of that file, the timecode readout should be zero.

09.scrubber-playhead-time-readout


Here's a closeup of the timecode readout when the scrubber/playhead is in the leftmost position.

10.close-up-time-line-readout


This timecode readout will help us place each audio file in the proper location so that the narration matches the visuals in our screencast. For example, if our next audio file is named 00-53M, we know that it should start at the 53 second mark. Simply move the scrubber until the timecode readout looks like this:


11.time-code-close-up-00-53

Then drag the file named 00-53-M.m4a to a position to the right of the scrubber/playhead, double-click the gap between them and then press the Delete key. That will place this audio sample precisely on the timeline where it ought to be. Repeat this process for the remaining audio files and optionally place a music track beneath all this with ducking turned on for the narration track.

Then, export your screencast as you normally would.

Finally, let's recapitulate these three steps in a screencast as follows:



Download the 720p version of this video
here with Control-click.

Wednesday, November 27, 2013

Enhanced Dictation in MacOS X 10.9 as an STT Engine for Extant Audio Files

The pressure is on to take affirmative action to make screencasts and other online video more accessible. Of course, this includes eTextbooks that contain video. One important aspect of that challenge is to make video more accessible to persons who are deaf or have difficulty hearing. For video content creators, this means providing a transcript or, better, providing subtitles to that video so that dialogue may be viewed in the same context as the video. This is fast becoming de rigueur.
The problem is that many videos are created without a script that is followed closely by the speakers in that video. Indeed, many important videos are created in ad hoc fashion (interviews, panel discussions, conference presentations and the like) where scripts would be totally inappropriate.
Creating text from speech has become essential to meeting these expectations, especially where all one has to work with is the speech in the audio track of a video. Speech to text (STT) is a bit more difficult than text to speech (TTS) which has been in use much longer.
MacOS X recently introduced Dictation (speech-to-text) as a feature usable in any application that takes text as input. This is quite an advance over having to purchase a two hundred dollar application to accomplish the same end. However, the first iteration of this system required an internet connection so that speech could be uploaded to Apple's servers where it would be turned into text. This created delays and was difficult to use for substantial bodies of text. However, Dictation was given a significant boost in MacOS X 10.9 (Mavericks) with the introduction of
Enhanced Dictation which enables offline use and continuous dictation with live feedback. Enhanced Dictation is NOT enabled by default (see link above for details on how to enable it).
Still, this is a system that assumes a live speaker. There is no obviously easy way to route speech from a recorded file through Apple's Dictation system to produce usable text. That's what this post is all about. You can, in fact, route the speech in an audio file through Apple's speech-to-text subsystem and render very usable text output. It isn't intuitive or Apple-easy but it is something that anyone can accomplish with a bit of determination. Here's how.
The application at the center of this process is
Audio HiJack Pro by Rogue Amoeba ($32 USD). There are two things to set up with this app. The first is to identify the source of the audio. It could be any app that emits audio but I used QuickTime Player X. Thus, I set that app as the audio source as follows:

ss.01


This will capture the audio from anything that this app plays. My
sample audio is from NPR and contains a dramatic reading from noted actor, Sam Waterston and looks like this in QuickTime Player X:


ss.02

This configuration will grab all the audio from QuickTime Player X as it plays the "NPR Gettsyberg Address" audio file. Next, we use Audio HiJack Pro to send that audio to Soundflower (free). To do that we go to the Effects tab and choose Auxiliary Device Output from the 4FX menu.

ss.03


The Auxiliary Device Output plug-in enables us to choose the previously installed Soundflower as the recipient of the HiJacked audio as follows:

ss.04

Once installed, Soundflower becomes an input/output option in your Sound preference pane and everywhere else audio sources and destinations can be specified. In other words, it becomes an integral part of your sound system in MacOS X.

Finally, we set the Dictation input to be Soundflower as follows:

ss.05

At this point, any audio played by QuickTime Player X will be routed to Soundflower and will thus become available to any application that accepts text input and has a Start Dictation menu item. In Pages, that looks like:


ss.06

The following screencast illustrates this process from start to finish:




A very special "Thank You" to Chris Barajas at Rogue Amoeba who patiently worked me through the intricacies of the in Auxiliary Devices Output plug-in for Audio HiJack Pro.

Tuesday, September 3, 2013

Using SVG images in iBooks Author

The primary advantage of Scalable Vector Graphics (SVG) files is that a very small file can be scaled up to yield large images without the aliasing (jaggies) that appears when a bitmapped graphic is scaled up. SVG files are resolution independent, usually non-photographic and commonly carry the suffix *.svg. There are lots of free SVG files available on the Internet and there are many applications for creating SVG files such as the free, open source Inkscape. SVG files can now be viewed via drag & drop onto web browsers such as Firefox, Chrome or Safari or via the free MacOS X app, Gappin. For an excellent primer on vector graphics, see this Wikipedia article.

So the advantage of vector graphics to iBooks Author is that these images can be scaled up without making those images fuzzy with jagged edges. A single U.S. state map vector image, for example, could be used to show full screen versions of each state without any visual loss. Complex diagrams such as those produced by OmniGraffle can be included at any level of detail.

However, it is not possible to use SVG images directly in iBooks Author.  If you attempt to drag and drop an SVG file onto an iBooks Author project, nothing will happen. You'll get no error messages or feedback of any kind. Similarly, apps in the
iWork suite (Pages, Keynote and Numbers) will also refuse to accept SVG files. This post is about how to work around that limitation.

The iBooks Author application has its own Text, Shapes and Graphs menus with which a number of vector graphics can be created. Another option is to use the vector graphics created by Keynote, Numbers and Pages. These can be copied and pasted directly into an iBooks Author project. Graphics created in iBooks Author or any of the iWorks suite applications are vector graphics in PDF file containers, not SVG file containers. PDF files can contain text, bit-mapped graphics and vector graphics. We are most interested in the latter type, vector PDFs. The
OmniGraffle application is a considerably more sophisticated graphics toolset and is capable of exporting both SVG vector drawings and PDF vector images. The latter are compatible with iWork suite and iBooks Author.

That's useful but there is an Internet full of already drawn
SVG images that are in the public domain or CC licensed.  It would be a shame not to have access to that vast library of free vector images.  The work around to this problem is to use this on-line conversion service to convert SVG to PDF and then drag and drop that PDF directly into an iBooks Author project or into one of the iWork apps or OmniGraffle for further manipulation.

Download an *.ibooks file
here that shows how vector graphics created in iBooks Author compare with vector graphics converted from SVG files. The following screencast uses that same multi-touch eBook.


Sunday, July 28, 2013

Using iAd Producer with iBooks Author (example: creating an external video player widget)

The iAd Producer application from Apple has grown considerably since its inception. Originally, it was a highly specialized application that created advertisements for mobile devices from Apple. Those iAds were composed of sophisticated HTML, CSS and Javascript.

Since that inception, it has been expanded to create iTunes LPs for music albums sold in the iTunes Store and iTunes Extras for video sold in the iTunes Store. These, too, rely upon HTML, CSS and Javascript web technologies. Most recently, iAd producer has added iBooks Author HTML widgets to its repertoire. Thus, the following screencast tutorial showing how easy it is to use iAd Producer to create a high quality HTML widget for iBooks Author without writing a single line of code.

This example focuses on creating an HTML widget that plays a video hosted on an external server. This keeps the size of your *.ibooks file down making for quicker downloads and avoiding becoming a burden to iPads already nearly filled to capacity with other books and media.



Try viewing this video in full screen to catch all of the details. Note that Firefox doesn't like MPEG-4 and will refuse to play this. Try any other modern web browser (Safari, Chrome, etc.).

Download the example book to an iPad to get an even better view of how this looks and feels in the hands of your audience.

Download iAd Producer (free developer registration required)

Tuesday, June 18, 2013

Danger: Do Not Duplicate an *.iba File - Use Templates Instead


The setting. I wrote four eTextbooks (of six planned) for a private iTunes U course that I am teaching. I used names such as Unit.01 Getting Started, Unit.03 Capture and so on.  These were uploaded to iTunes U via the iTunes U Course Manager. 

The bad move. Once I got the design of Unit.01 decide upon, I duplicated the *.iba file for Unit.01 and edited it to make the shell for Unit.02 and so on.  What I should have done was to create a template and work from that. Bad move.

The reason. After a bit of back and forth with some very diligent folks at Apple involving both the iTunes U and iBooks Author teams, we discovered that my bad move caused the *.iba files to have the same internal ID and that caused all of the resulting *.ibooks files exported from them to inherit that identical internal ID.  

The cure. So I opened each *.iba file and made a template from it, closing it and adding the prefix "old_" to its file name in the Finder, just to have a fallback in case something went wrong.  After that, I created a new IBA project file from the just created template and saved that under the old name (no prefix) and exporter a new *.ibooks file replacing the old , defective, identity-challenged *.ibooks file. Rinse, repeat with each of the other eTextbooks.

Testing has shown that all of these eTextbooks have regained their individual identities. Opening Unit.04 always results in opening Unit.04. Success.

The moral. Make templates, don't dupe an *.iba file.

Friday, February 8, 2013

HTML Widgets Made Easy: External Video Player Example

The iBookstore limits the size of of *.ibooks files created with iBook Author (henceforth, IBA) to 2 GB and recommends that you keep the size of your iBook file under one gigabyte if possible in order to avoid taking too much space on your readers' iPads as well as to avoid your readers having to endure long download times. Although including video that is internal to your IBA project is a simple drag and drop application using the Media Widget in IBA, that kind of video will very quickly increase the size of your iBook and may place an unwelcome burden on some of your readers.

The alternative is to include external video in your IBA project using a custom made HTML Widget. The big advantage is that a one megabyte HTML Widget can play a 70 megabyte video in your iBook. The downside, of course, is that the reader must have an active internet connection and the availability of the video must be maintained. If a video used in your iBook should become unavailable, you can provide your readers with a free upgrade correcting that issue via the iBookstore's versioning feature.

Unfortunately, many people are persuaded not to use this approach because it involves writing HTML code but this post will offer you a way around that obstacle. If you can use a text editor, you can modify an HTML widget template that plays an external video that you select for your iBook. Here's how:

As you'll learn from
this Apple support document, an HTML widget is nothing more than a collection of text files enclosed in a folder with the suffix ".wdgt" added to it. On the Mac, adding that suffix to the folder name changes the appearance of the folder into a widget icon. The minimum HTML widget contains three files: a Default.png file, an index.html file and an info.plist file. I have prepared an HTML widget that you can use as both an example and a template. It is a ZIP archive containing a complete working widget that you can add to a test IBA project. Once you have it in an IBA project you may use the Preview function to see how it works in the iBooks.app on an iPad. Download that HTML widget here and then double-click on it to extract it.

This example widget plays a video called "Open Access Explained" that is hosted on a server that I have access to. In this tutorial, I will show you how to open the widget and modify it so that it will play another video, one that is on a server that I do not have access to, a video that you choose. All I'll have to do to accomplish this feat is to open the widget, change the Default.png file and edit the text of the index.html and info.plist files so that they reference a different video. It's just that easy.

Of course that video must be playable on an iPad so no Flash. These
tech specs provide all the necessary details. The great thing about video on the iPad is that the HTML 5 video tag works without having to create multiple fallback versions of your video (*.mp4, *.ogg and *webm) as one would have to do on a web site. As long as it's using the MPEG-4 H.264 video and AAC audio CODECs, it can be in either a MOV, MP4 or M4V container. More simply, if the video plays on your iPad, it will play in this widget.

The video that I'll be modifying the widget to use in this tutorial is:
http://movies.apple.com/media/us/mac/ibooks-author/2012/tours/apple-ibooks-tour-ipad_ibooks_author-cc-us-20120314_r848-9cie.mov Because I'll be changing the widget to play another movie with different dimensions, I'll need to create a new Default.png file and change all of the references from the old video to the new video. I'll be using the BBEdit text editor but any plain text editor such as TextEdit will do just as well. Here's a screencast showing how this is done. Click HERE or click the image below.




Caveats: Some video services such as Vimeo and YouTube go to great lengths to tie their hosted video to their own web sites so that they can generate data about you and get paid for exposing advertising to you. Thus, it is just a little more difficult to use these videos in an iBook but it can be done. I may take that topic up in the next post.

NOTES:

• About the "auto play" attribute. You'll notice that I use the optional "auto play" attribute in the HTML 5 "video" tag. All HTML widgets take over the entire screen when invoked. Under iOS 6.x (tested), tapping this external video player widget will bring the poster (Default.png) image to full size atop a white background that also displays the widget's title and caption as well as a close button. A standard iOS "play" icon will be superimposed on the center. The video will begin to play automatically without the reader having to tap this play button. The time that auto play takes depends upon the size of the video and the speed of the network. The operating system tries to estimate when it can play the external video without interruption. The reader can always tap the play button prior to auto play. Simply delete the "auto play" attribute if you rather not have this feature operative.

• About the "controls" attribute. I also use the optional "controls" attribute. This provides the reader with a standard video controller with which they can control playback of the video such as audio volume and two "full screen" options as well as a scrubber for moving the play head to arbitrary points along the time line. Simply delete the "controls" attribute if you'd rather not have this feature be available to your readers. The following image shows these various controls and their effects.




Resources:

Safari HTML 5 Audio and Video Guide

iBooks Author: About HTML widget creation

Saturday, December 8, 2012

Providing iBooks Author Feedback to Apple

One of the most useful widgets for iBooks Author is the Keynote widget. It enables you to add a presentation to an interactive iBook using the features of the Keynote.app for MacOS X and iOS, including many of the transitions and builds. You can even convert a PowerPoint presentation to Keynote and bring that content into your iBook as well. The full details are in this technical note.
The one disappointment I had was that this widget does not support voiceover narration. This can seriously diminish the value of a slide presentation. The reader can flip through the slides forward and backward but they have to guess what the presenter might have said. Peter Norvig did a wonderful six slide Powerpoint presentation illustrating this very point. See the slides for President Lincoln's Gettysburg Address
here. View the slides on-line or download the presentation as a *.ppt file.




As you'll see, there is something missing, something very important.

Of course there is a way around this. In Keynote, you can add a voiceover and export the presentation as a video to include in your iBooks Author project using the media widget. You can also use screen casting software such as ScreenFlow to capture slides, narration and even a secondary video source such as a PIP (picture-in-picture) of the speaker. The problem with these audio-annotated slideshows done as video is that their file sizes are unnecessarily large. This is a problem for iBooks both because of the 2 GB limit and the time it takes for readers to download very large iBooks. This might well reduce ones audience.
My use of the word "unnecessarily" should signal that there might be an even better workaround and there is – sort of. What I'm about to describe would be a great workaround
if it were supported by iBooks Author. It is not currently supported in iBooks Author but users of that application can change that. Request an enhancement right from within iBooks Author like this:




The workaround that's better than a video is called an "enhanced audio" file. It is created in GarageBand and carries the *.m4a file name suffix.. You may also see it referred to as an "enhanced podcast" file. What makes the enhanced audio file such a great alternative to video is that it uses one static image of a slide over its entire time on screen instead of 30 frames per second as in a video. If a 50k slide is on-screen for 100 seconds in an enhanced audio file, that image contributes only 50k to the total file size. If a 50k slide is on screen for 100 seconds in a video file, that image contributes 150,000k ([50*30]*100) to the total file size. That's 50k vs 150 Mb, a 3000:1 ratio in this example! In real life, the difference is somewhat less than this because good video encoding uses a number of neuroscience-based tricks to present incomplete data in between the key frames that are full representations of what the camera captured. That fools the eye and takes less space. Still, the difference is quite significant. We'll look at a real world comparison below.

Since this is not a how-to post, I'll leave that task to others. There are many fine tutorials teaching you how to use GarageBand to create enhanced audio files on the web. Here's a good
one in the form of a PDF.

I created an example using some ancient media describing the beginnings of the Space Shuttle program. Intended for school use, the package contained a cassette audio tape and a set of photo slides. The audio tape has sharp "beeps" to tell the projector operator when to advance to the next slide image. I've left those beeps in for their nostalgia value. Here's the enhanced audio file slide show:



You may download a copy of this file
here and it will play (larger) in QuickTime X Player, in the iTunes.app and may other venues that support QuickTime but just not iBooks Author and the iBooks it creates. This 18 minute presentation is only 21.4 MB in size! Space-efficiency isn't the only advantage of enhanced audio files. The assembly of the static images creates a chapter track that enables the viewer to quickly and easily move to any part of the presentation. This is great for studying a topic where revisiting a difficult section is helpful. Here's a screenshot to illustrate what a chapter track looks like:



Here's a view of the GarageBand project that created this enhanced audio file:



So, what would this presentation cost us in terms of file size if it were a video? I created an *.mp4 version with ScreenFlow using the same assets. That version weighed in at 198.2 MB. You may download a copy of that file here. The *.m4a file tipped the scales at 21.4 MB. The video version is approximately 9.3 times larger than the enhanced audio file yet playing them side by side reveals no important differences. Here's a screencast of that analysis:



If you'd like to download and view a larger version of this video, you may do that
here.

The one on the left is the c. 200 Mb video and the one on the right is the c. 20 Mb enhanced audio file. So, if you are at all impressed by the potential advantages of being able to use an enhanced audio file in an iBooks Author project, send in that enhancement request to Apple as described above and do that ASAP.

By the way, you can add an enhanced audio file to an iBooks Author project and it will play the audio part. No slides though and that's where the biggest advantage is. Here's what that looks like in iBooks Author.



Note that there is an option for "Show Audio As:" that includes an "Image" option. That doesn't make the slides appear though. That's for drag/dropping a single image onto it that will appear throughout the duration of the audio. Yes, I got real excited when I first saw that.