1. Interactive Online Audio
New!
Open source (FREE)!
All files are provided!
Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe (ULM)
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

2. Interactive Online Audio
Before, interactive online educational audio was very difficult to produce with expensive software.
Now, you can use a “cookie cutter” approach…
… with open source
software.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

3. Is This Hard To Do? This is a step by step process.
You need to know how to
“Capture” images as “.gif” files.
Record audio as “.mp3” files.
Edit an HTML file… just a little bit.
(Optional) Put it online.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

4. Can I Really Do This? Yes! Just follow the steps.
All files are provided. Our example:
Counting 1 to 10 in Chinese.
Key Point: You can adapt ANY CONTENT on your own with this simple step by step process.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

5. Can I Apply My Own Content?
Yes! You can adapt ANY CONTENT using your own images and your own audio.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

6. Interactive Online Audio
Let’s view some working examples of interactive online audio.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

7. What’s Involved: 5 Steps
Put your content inside of a “box”.
“Capture” it as an image file.
Create a related audio file.
Use free software for minor editing of an “HTML template” file.
(Optional) Put it online within a minute!
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

8. What’s Involved: 5 Steps
Put your content inside of a “box”.
“Capture” it as an image file.
Create a related audio file.
Use free software for minor editing of an “HTML template” file.
(Optional) Put it online within a minute!
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

9. What’s Involved: 5 Steps
Put your content inside of a “box”.
“Capture” it as an image file.
Create a related audio file.
Use free software for minor editing of an “HTML template” file.
(Optional) Put it online within a minute!
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

10. What’s Involved: 5 Steps
Put your content inside of a “box”.
“Capture” it as an image file.
Create a related audio file.
Use free software for minor editing of an “HTML template” file.
(Optional) Put it online within a minute!
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

11. What’s Involved: 5 Steps
Put your content inside of a “box”.
“Capture” it as an image file.
Create a related audio file.
Use free software for minor editing of an “HTML template” file.
(Optional) Put it online within a minute!
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

12. What “Box”?
This presentation includes slides that have “boxes” that can be used to create your own content.
Let’s view an example of a slide with 3 “boxes”…
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

13. How are you? I like turtles! 01, 02, 03
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

14. Basically…
We need to “capture” and save content inside of “boxes”. Then, record audio for each “box”.
Image File
Audio File
01.gif
01.mp3
02.gif
02.mp3
03.gif
03.mp3
99.gif
99.mp3
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

15. “Cookie Cutter” Instructions 1. View slide in “Edit Mode”, at 100%.
2. “Crop” the border of the “box” with any image editing application you like. Then, “resize” the image to 900x200.
3. Save as “.gif” image files.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

16. “Cookie Cutter” (“Snagit”)
Instructions (Easier!) 1. View slide in “Edit Mode”, at 100%.
2. Use “Snagit” with this setting: Input => Fixed Region Properties => Width=900, Height=200)
3. Save each “capture” as a “.gif” image.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

17. Repeating…
We “capture” and save content inside of “boxes”. Then, record audio for each “box”.
Image File
Audio File
01.gif
01.mp3
02.gif
02.mp3
03.gif
03.mp3
99.gif
99.mp3
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

18. Examples Of “Boxes”
Let’s view 10 boxes…for counting from 1 to 10 in Chinese.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

19. 01, 02, 03
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

20. 01, 02, 03
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

21. 01, 02, 03
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

22. 01, 02, 03
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

23. Example Of “Blank Boxes”
Let’s view a slide with blank boxes.
You can put ANYTHING inside of the boxes…
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

24. Save captured images as: __.gif, __.gif, __.gif
01, 02, 03
1. While viewing this slide in Edit Mode, use view setting of 100%. 2. Set Snagit to capture at 900x200 pixels with this setting: (Input => Fixed Region, Properties => Width=900, Height=200)
Save captured images as: __.gif, __.gif, __.gif
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

25. Steps 1 & 2
In Steps 1 & 2, we use the “boxes” for content by “capturing” “.gif” image files.
Image File
Audio File
01.gif
01.mp3
02.gif
02.mp3
03.gif
03.mp3
99.gif
99.mp3
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

26. Step 3
In Step 3, we record related mp3 audio files using “Audacity”, a free audio editor application.
Image File
Audio File
01.gif
01.mp3
02.gif
02.mp3
03.gif
03.mp3
99.gif
99.mp3
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

27. Step 4
In Step 4, we do some minor editing of an HTML template file using a free HTML editor called “Kompozer”.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

28. Step 5
In Step 5, optionally, upload the files to an online account. This takes less than a minute.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

29. View The Working Example
Let’s view the working example. Click on the arrow below to view the working files used to create
“Counting 1 to 10 in Chinese”.
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

30. Under The Hood (1) image file: 08.gif audio file: 08.mp3
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

31. Under The Hood (2)
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

32. Workshop Hands-On Example
Download the workshop example by clicking on the red arrow.
You will find the files at this location:
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

33. Is There A Book About This?
There will be a book in print in early 2012 titled Online Audio.
Publisher
Visions Technology In Education
Website
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe

34. Interactive Online Audio
New!
Open source (FREE)!
All files are provided!
Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe (ULM)
LACUE 2011, November 30, Mike Beutner, Ph.D., Instructional Technology, University of Louisiana at Monroe