In this H5P example for Course Presentation, I will show you how to take simple images, text and audio narration, and turn it into a digital children’s picture book that is easily shareable on most any website.
Apps and Equipment
Some of the links below are affiliate links, which means I receive a small commission if you purchase a product using my links. However, this tutorial can be accomplished using the free version of the apps below.
- H5P or Lumi Education
- Canva account (free version)
- Find and edit images in Canva
- Use a square template 1080 px by 1080 px.
- Look for similar images using the content creator’s name.
- Add a border color using the eyedropper.
- Export as PNGs.
- Write the text or script.
- Create a script to go with each image.
- Write alternative text for each image. This will be read aloud by a screen reader app.
- Record the narration.
- iOS / Mac – Voice Memo app
- Android / Windows – Voice Recorder or Sound Recorder app
- H5P – Audio Recorder content type
- Use a mic, headset, or cell phone for the better quality audio.
- Upload all media to H5P Course Presentation.
- Add image to left side of slide, click and drag corner to resize.
- Add text to right side of slide, use 450% for text size.
- Add audio file, use full player to display play button and volume controls.
- Clone slides and edit the image, text, and audio files.
- Under behavioral settings, hide summary.
- Embed content type on a webpage.
- Use H5P embed code (iframe).
- Related blog post: Lumi Education Cloud App – Create an Embed Code (iframe)
H5P Audio Recorder Content Type
Final Content Type
This activity cannot be embedded on other websites. To use this activity in your own websites, you must select “Reuse” and then select “Download as an .h5p file”. In your instance of the H5P creation tool, select “Add Content”, then select “Upload” and choose the file ending in .h5p that you recently downloaded.
The H5P community is all about sharing! Please consider sharing the link to your remixed creations in one of the following places:
- the comments below,
- the H5P Showcase forum,
- social media with #H5Pcommunity
- or the H5P OER Hub.