Html 5 for playing audio in HotPot/QuizPort/TaskChain

Html 5 for playing audio in HotPot/QuizPort/TaskChain

by John C. Herbert -
Number of replies: 9

Hi Gordon, Stan, and anyone else who might be willing and able to answer this question:

Is there a quick and easy way in Moodle, HotPot, QuizPort, and/or TaskChain to embed an audio file into an activity created by one of the aforementioned modules, which normally would simply require a square bracket insertion like [audfile.mp3 moodle 0 0] and would play with Flash animation; but, instead of flash, can we make it play by some form of html5 solution?

In making this change, would I still be able to use the square bracket insertion and just change the settings in Moodle or in the given module?

Are the requirements to set up html5 for audio the same across each module (HotPot, QuizPort, and TaskChain)?

Thanks,

John

Average of ratings: -
In reply to John C. Herbert

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by Stan Bogdanov -

Hi John,

to play html5 audio or video you do NOT need the square bracket notation - simply put the code in the HotPotatoes exercise and upload the exo and all media with either of the modules.

code for audio (you need to provide 2 files: mp3 or mp4 or m4a and oga):

<audio controls="controls" preload="metadata">
   <source src="audio-file.m4a" type='audio/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="audio-file.oga" type='audio/ogg; codecs="vorbis"' />
    No HTML5 audio playback capabilities. No Flash fallback either!
</audio>

Gordon made the modules aware of the html5 audio and video tags in early April 2012, (see this thread https://moodle.org/mod/forum/discuss.php?d=199889). He may decide to provide the shorthand feature (the square bracket notation) so non-coders can enjoy html5 audio and video exos ...

More about HTML5 audio and video (server setup, codecs, encoding and encoders, as well as sample exercises which also work on mobiles and handheld) can be found on my site:

http://ewbooks.info/hotpot/hotpotatoes-xhtml5-audio-video
http://ewbooks.info/hotpot/xHTML5-audio-and-video-in-HotPotatoes
http://ewbooks.info/hotpot/custom-hack-html5-audio-video

Cheers

Stan

 

Average of ratings: Useful (2)
In reply to Stan Bogdanov

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by John C. Herbert -

Thanks Stan!

I really appreciate your help. But, I am sorry to say that I believe I need to start a couple of steps back from this. 

Let's say I have two audio files named "dog.mp3" and "dog.ogg." That being the case, would I change "audio-file.m4a" in the code you provided to "dog.mp3" and "audio-file.oga" to "dog.ogg" and "audio/mp4" to "audio/mp3" and "mp4a.40.2" to "mp3a.40.2"? I've tried variations of this, but all I keep getting is a player that reads: "Loading . . . " But, it never finishes loading my 4 or 5 second long audio file.

How would you do it if you had  two files named "dog.mp3" and "dog.ogg"?

Thanks,

John

Average of ratings: -
In reply to John C. Herbert

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by Stan Bogdanov -

Hi John,

Try this

<audio controls="controls" preload="metadata">

  <source src="dog.mp3" type="audio/mpeg">

  <source src="dog.ogg" type="audio/ogg">

No HTML5 audio playback capabilities. No Flash fallback either!

</audio>

 Are your mime types OK on the server?

Cheers
Stan
Average of ratings: -
In reply to John C. Herbert

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by Stan Bogdanov -

Hi John,

Here are two quick pages:

  • mp3 and ogg - not workinng in IE only:

http://www.ewbooks.info/html5/jh/mp3index.htm

  • m4a and ogg - working everywhere, even IE9:

http://www.ewbooks.info/html5/jh/m4aindex.htm

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by John C. Herbert -

Dear Stan, Gordon, and anyone who might want to have their students to access audio files via iPod Touches:

Sorry. I was asking a coding question, when the route of the problem turned out to be a hardware problem. I have a 2nd Generation iPod Touch. However, browsers that support html5 require an iOS version of 4.3 or above, while the 2nd Generation iPod Touch tops out at 4.2. When I couldn't play the html5 audio on my iPod Touch, I thought I was doing something wrong in the coding. But, when I used a third generation iPod Touch, everything worked just fine on more than one browser.

So, for anyone who is interested, if your online students are using mobile devices from Apple, make sure they have iOS4.3 or above before assuming they can play your html5 audio.

Thanks for your help.

John

Average of ratings: Useful (2)
In reply to John C. Herbert

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by Stan Bogdanov -

Hi John,

Apparently, it wasn't the right question.

I test on other people's devices as I don't personally own an iDevice but what I can figure out up to now goes along these lines:

  • No 2nd Gen device can play html5.
  • 3rd gen devices could play if upgraded; the highest supported iOS is 5.1.1. Support discontinued.
  • 4th Gen devices, if coming with preinstalled 4.1 need upgrade (support discontinued); if preinstalled OS is 5 - play audio and video OK (support discontinued by the end of 2012) 
  • 5th gen device comes preinstalled with iOS 6, so things are a OK.

What I dislike about Apple devices re: video is that they ALWAYS open the video in Fullscreen mode (unlike Android which can play it inside the exercise), so on IOS any video must be watched first, then closed so questions get answered in the HotPot exercise.

As far as file formats, Android recognises mp4 only (for now), so no mp3 should be used for mobile delivery of content.

But as Bob Dylan wrote and sang,  "The Times They Are a-Changin"; and what's true today may not be so tomorrow.

Ne varietatem timeamus.

Cheers

Stan

 

Average of ratings: Useful (1)
In reply to Stan Bogdanov

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by John C. Herbert -

Thanks again for the detailed clarification.

Actually, my one student who has an Android is listening to mp3 files that I have embedded in QuizPort/JCloze activities via the square bracket insertion with a Flash player.

I agree with you and Bob Dylan, much of what I said about QuizPort and mobile devices at HotPot Mini-Moot 2011 in Paris and at EuroCALL 2011 was no longer relevant by the time the EuroCALL 2011 conference proceedings were published (maybe even by the time I had finished preparing what to say at the conferences).

Cheers,

John

 

Average of ratings: -
In reply to John C. Herbert

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by Stan Bogdanov -

Hi John, and All,

Android has no problems playing mp3 with flash. Or Flash in general for that matter.

I meant mp3 as audio source in html5 is not very reliable.

John, where can I see some of your mobile content?

Cheers

Stan

Average of ratings: -
In reply to Stan Bogdanov

Re: Html 5 for playing audio in HotPot/QuizPort/TaskChain

by John C. Herbert -

Hi Stan, and All,

I am flattered that you would even ask about my "mobile content." To be clear, I do not have any content that automatically opens up in a made-for-mobiles format when accessed (so I hope that is not what you were thinking). But, as you saw at my presentation in Paris last year, I do have a handful of tips to share with novice HotPot, QuizPort, and TaskChain users. (Experts might look at these ideas and chuckle though.) The tips I shared were also presented at EuroCALL 2011, the week after our mini-moot. The brief report I wrote for the EuroCALL 2011 conference proceedings can be found here, http://www.eurocall-languages.org/review/20/papers_20/17_herbert.pdf, although it might already be somewhat outdated. 

Basically, when I say to people that they can use HotPot, QuizPort, and TaskChain for activities intended for mobile access, I explain that some output formats are more mobile-friendly than others. A few key issues to consider are:

1. What to do with audio. Apple does not work well with Flash. HTML5 does not work well with Android. (Thanks for the latter tip, Stan.)

2. Drag-n-drop and key press do not work in some browsers on mobile devices, so stick with dropdown menus or touch friendly activities like the example below. (You will need the username: yruhereXX and password: yruhereXX where XX = 01 to 07 to access this example. This is open to anyone from this forum who would like to check it out.)

JMix (v6) for Scrambled Letters on Touch Screen/Mobile Devices

3. Take advantage of the JQuiz, JCloze, and ANCT-Scan Auto-Advance output formats. The keyword here being "auto-advance" (AA). With JQuiz(AA), as long as you have the same question length and number of answer choices for each question, then each consecutive question will fit into the same frame. And, with JCloze(AA) and ANCT-Scan(AA), you can use your own HTML tables to set up the display size of each question such that each question fits equally on every consecutive page, as seen in the following example.  (You will need the username: yruhereXX and password: yruhereXX where XX = 01 to 07 to access this example. This is open to anyone from this forum who would like to check it out.) All that the mobile user has to do is frame the first question to fit the mobile screen (by simply zooming in on the question), and all subsequent questions will automatically fit into the same frame one page at a time without requiring any scrolling or resizing.

ANCT-Scan (Auto-Advance) for Mobile-friendly Photo Questions

If you happen to be interested in more examples of activities I use to introduce people to QuizPort, please have a look at the course page where I have posted the two aforementioned activities at http://herbert.quizport.com/course/view.php?id=21. (Using the same username and password as above.)

Other than that, I am sorry to say that the only things I have online right now are personal, student generated files; and, as such, access is restricted for now.

I hope you found what I did provide to be helpful in someway. Please feel free to replicate anything I have shown you (for all of you to whom it may concern) on your own tutorial site if it looks remotely worthy.

Thanks,

John

 

 

 

Average of ratings: Useful (1)