![]() There are a couple of ways to define what segment of the audio each slide plays. How will we stop the audio after it gets to the end of the section.How will we define what audio to play for each slide?.That might sound simple, but we need to figure out a couple of things first: Our extension boils down to one requirement: It should automatically play a defined section of audio on each slide. For brevity's sake, I won't get into the details of Deck.js or creating extensions, but you can check out the code in the GitHub repo. We'll be creating a new extension called Narrator. Deck.js supports extensions, which allows you to add functionality to your slides beyond what's already provided. To make things easier, we're going to use the fantastic 'Deck.js' project as our HTML slide framework. So now we've got the building blocks for implementing a slide narrator. In the Part 2, we'll put this functionality to use by adding narration to slides. Our element has a 'currentTime' property that can be both get and set (in seconds).Ĭonsole.log(audioPlayer.currentTime) // returns 0 since we haven't started playing the audio yetĪudioPlayer.currentTime = 10 // move to 10 seconds into the audioĬonsole.log(audioPlayer.currentTime) // returns 10Ĭonsole.log(audioPlayer.currentTime) // returns 11Īs you can see, getting and setting the current time is a trivial process. The other part of the equation is the ability to seek to different locations in our audio. These methods will come in handy in a moment when we want to start playing our audio after we change slides. Var audioPlayer = document.getElementById('myPlayer') Calling those methods is straightforward: The element has two built-in methods for this, 'play' and 'pause'. To do this, let's take a look at the API for starting and stopping playback. This makes allowing manual control of our audio very simple.įor our needs, we want to control the playback of the audio programmatically. What's nice is that since we used the 'controls' attribute, the audio player controls are built for us by the browser. Okay, so now if we load this into a webpage we'll get a simple audio player that we can manually control. The 'src' attribute, whose value is the path to the audio file, and the 'type' attribute, whose value is the MIME type of the file.Īgain, the browser will choose whichever file it supports without you having to do any detective work. Your browser does not support HTML5 audio. We can load our audio files by adding in two tags with information about our two audio files inside of the tag: If you'd like to read more on the subject, I highly recommend Ashley Gullen's post 'On HTML5 audio formats - AAC and Ogg'. And we'll need a patch work because no one format is currently supported across all browsers.įor our needs, we've created two files: an MP4/AAC file and an OggVorbis file. This means we can create a patchwork of audio file formats to gain full browser support. Luckily for us, the tag supports multiple formats gracefully. The MP3 format has gained tremendous popularity over the last decade and a half, but unfortunately due to licensing requirements, relying on MP3's for our audio is a messy situation. File formatsīefore getting in to the details on how we're going to use the tag, we need to talk a little about file formats. Plus, the tag allows you to use native controls and/or provide your own customized controls. also allows API access so that we can control playback, seek through the audio, and even manipulate the data with the MediaStream API. on the other hand has wide support, with only IE 7 & 8 lacking functionality. So what benefits does bring us? Well, was an IE only property. According to the latest W3C spec, has a much friendlier HTML5 alternative that you've likely heard of: the tag. Luckily for us, isn't the end of the story. Those who were programming back when HTML 3.2 came out will be familiar with this oft-forgotten tag. I'm not talking about a Flash-based music player, but rather the more primitive audio solution. Audio on the Webīack when the web was just taking off, it was common (bad) practice to include audio on your page. To show what we're trying to accomplish, I've created a very basic slide deck with audio narration which briefly describes the issue at hand. Fortunately, with HTML5 audio, we can add our voice back to our slides and recreate the real presentation. But many times the slides are only a shell of the real talk. Many presenters share their slide deck on the web after their presentation. ![]()
0 Comments
Leave a Reply. |