Transcript

00:10 hey so in this video we're going to be
00:11 going through audio Pro demo file and
00:14 kind of showing you the ins and outs of
00:16 all the various demos within this
00:17 project so here we are on the homepage
00:20 and this is just the simplest
00:22 implementation of audio Pro it shows one
00:25 audio file um and it's pretty simple
00:28 right you just add audio Pro to the page
00:30 now by default we have one audio track
00:33 here and you have to be able to upload
00:36 that audio file to your server um or
00:39 whatever wherever you want and get a URL
00:42 to that file you then put the URL to
00:45 that file here and then you need def
00:47 find what type of audio format this is
00:50 in the default most of the time is going
00:52 to be MP3 okay but there are some um
00:55 some other audio formats that you might
00:58 want to use and some more modern ones
01:00 such as webm and Aug that and Opus as
01:03 well that um really are kind of bleeding
01:05 edge they might not be supported as much
01:07 on every browser so you might want to
01:09 supply some sort of fallback audio
01:12 format such as MP3 if you plan on using
01:15 those okay now just wanted to say if you
01:18 wanted to supply multiple um audios just
01:21 go ahead and Supply another one okay and
01:24 actually I'm just going to go ahead and
01:25 copy and paste this one here so that we
01:27 have two and let's just say for instance
01:30 um I was going to have this one was
01:31 going to be an Aug okay so it's going to
01:33 be Aug V or I'm sorry Aug OG okay so
01:37 let's say this is an Aug file um that
01:40 file doesn't exist right now on my
01:41 server I'm only serving up an mp3 but
01:44 let's pretend it did um I would go ahead
01:46 and select Aug here now what you would
01:48 want to do is you want to make sure that
01:51 um the files that you prefer being used
01:54 be on the top right so I'm going to go
01:55 ahead and drag this one up so that way
01:57 my Aug file is first and if a browser
02:00 doesn't support that then it falls back
02:02 to the MP3 and you you can supply
02:05 multiple here as well you can add
02:06 another one and maybe a wave format or
02:08 something like that but basically the
02:10 first one that the browser catches that
02:12 it supports that is the file that's
02:14 going to be
02:16 used now let's look some of the basic
02:18 settings inside audio Pro so up here we
02:21 have our title this is basically going
02:23 to be a title tag in the for
02:25 accessibility purposes so um if you have
02:29 a user that is um you know using a
02:32 screen reader um this title would then
02:34 you know describe uh what this audio is
02:37 to them okay um for pre-loading purposes
02:41 do you want to do zero preloading on the
02:43 page do you want to load metadata which
02:45 basically load like the time so that um
02:48 and also the timeline markers will be
02:51 loaded on page load okay um or if you do
02:54 auto the browser will determine based on
02:56 the person's connection what to do okay
03:00 then you can set the starting volume um
03:02 I recommend not using 100% okay cuz
03:05 sometimes you know people will start um
03:08 you know playing audio and not realizing
03:10 their maybe their speakers are super
03:12 loud so you know definitely you know
03:14 probably go a little bit lower than you
03:16 know 100% right I think the default here
03:18 is 80 um but you can adjust that to be
03:20 whatever the start volume you'd like to
03:22 be the next are a couple settings for
03:23 playing in line play in line uh has to
03:26 do with touch devices a lot of times if
03:28 you were to Tap Play on an audio player
03:30 it kind of takes up full screen just
03:32 like it does for video so this allows it
03:34 to just remain in line uh within the
03:36 browser um Loop audio obviously makes
03:39 this audio Loop okay um then we have
03:42 some controls here so you can you know
03:45 jump backwards and forwards uh by 3
03:48 seconds uh you can support AirPlay and
03:50 you can also turn on speed control so if
03:52 you want someone to listen at 1.5x or
03:54 something like that and you can turn
03:56 that on we're going to skip some of
03:58 these others and we're going to go down
03:59 to the bottom here and if you want to
04:00 turn on analytics tracking so if you're
04:02 using Facebook pixels or Google
04:04 analytics and you want to have some sort
04:06 of uh tracking of whether or not user
04:08 plays if they hit various points uh
04:11 within the the audio you can go ahead
04:12 and turn on these trackers
04:15 here now let's uh let's jump on to the
04:18 playlist demo so here um if you're using
04:21 an audio playlist um you're going to
04:24 list out multiple tracks here um now
04:27 when we're using a playlist though um it
04:29 is recommended you just use all one
04:31 format um you can't mix and say I want
04:34 to supply Aug and MP3 versions of every
04:36 file um here you're going to supply one
04:39 version of a file um and then basically
04:41 every file here is going to be one track
04:44 in your
04:45 playlist uh let's look at some of the
04:47 playlist specific options here basically
04:49 when you turn on playlist support um
04:51 you'll see more options have been added
04:55 we have a next track button a previous
04:57 track button so you basically have some
04:58 more controls um Shuffle button as well
05:01 um you can turn on autoplay next track
05:04 which means when uh one track is done
05:05 it'll automatically start playing the
05:07 next track in the
05:09 playlist um this is just a little bit of
05:11 text that shows when a playlist is
05:13 playing let's go ahead and preview
05:16 that so we'll see here I have my my uh
05:19 playlist here I set up different tracks
05:22 um here we have that now playing text
05:24 okay and it will show the title of that
05:26 track and we'll show how to set up that
05:28 information in a minute
05:30 next is um the height list so this is
05:33 the uh the actual height of the playlist
05:37 area above the audio player and then you
05:39 can choose a minimum and maximum size of
05:42 the thumbnails okay so this allows the
05:45 thumbnail to kind of contrast
05:46 responsively so depending on how much
05:48 space it'll grow and Shrink we can
05:51 supply a minimum and maximum value um
05:53 for the size of that
05:57 thumbnail now let's look at the
05:59 individual ual track options when we're
06:01 using a playlist so some settings I
06:03 skipped earlier um these settings are
06:06 only used for when you're using a
06:08 playlist so here you can go ahead and uh
06:11 select a actual thumbnail that gets
06:13 displayed you can either use Warehouse
06:15 or drag and drop you can supply the
06:18 actual track information so the title as
06:20 well as a full description of that
06:23 track now if you are using a playlist
06:26 something we haven't gone over is
06:27 timeline markers okay okay um we'll
06:30 review those in a little bit but just to
06:32 let you know you can actually add
06:33 timeline markers per track as well so
06:36 each track could have its own timeline
06:39 markers um
06:41 defined now while we're talking about
06:44 playlists I just want to quickly review
06:47 feeds okay um if you're going to use
06:50 something like feeds or total CMS here's
06:52 an example of where I'm bringing in the
06:54 RSS feed from Weaver Radio podcast uh
06:57 the podcast I used to do with Greg bar
06:59 chard okay um and then here's an example
07:02 if you want to peruse this how I'm
07:04 taking the RSS feed and I'm actually
07:07 creating audio tracks for each
07:09 individual podcast episode we see here
07:12 uh we now have a track added for every
07:14 single podcast episode um inside the RSS
07:18 feed for the podcast which is pretty
07:21 awesome oh the last big feature of audio
07:25 Pro is going to be
07:26 CT so in this example here um let's look
07:29 at here uh we'll see that inside the
07:32 audio Pro I've added a I've added a
07:34 timeline marker so I'm gone ahead and
07:36 clicked on ADD timeline markers and in
07:38 this example I only have one um you can
07:40 customize the size of that marker as
07:42 well as the color Okay um and then
07:46 further on since I want to add ctas as
07:48 well you don't have to add ctas you can
07:51 use markers all by themselves just kind
07:53 of delineate key points within the
07:56 audio but here we're actually going to
07:59 use them in combination with each other
08:01 okay um so you go ahead and click on ADD
08:03 player
08:04 ctas and here you'll be able to
08:06 customize the kind of the background
08:08 color the color of the close button and
08:10 the blur which is it actually if you'll
08:12 notice let's go ahead and look at this
08:14 here okay uh let's go ahead and uh play
08:17 this
08:20 CTA and what you'll notice here is um
08:23 the CTA is overlaid on the content above
08:27 the audio player um so the background
08:30 color that you're configuring here is
08:31 the background that you see here um the
08:34 close button color obviously and if you
08:35 look it actually blurs the content that
08:38 it's laying on top of right which is
08:40 really cool okay so that allows us to
08:43 just have add a little bit of style um
08:45 of things now the height of the CTA is
08:48 just dependent on the size of your
08:51 content within the CTA so here I you
08:55 know I added something that was a little
08:56 bit larger so it actually needs to fill
08:58 that but if I just had something small
09:00 Maybe audio or a bit of text you can use
09:02 CTA just to portray
09:06 information now um let's go ahead and
09:09 look at how we can configure those ctas
09:12 so when we add in uh or when we turn on
09:15 this CTA feature you'll notice that
09:17 another drop- down area uh displays down
09:19 here you can add as many ctas as you
09:22 want let's have a gander at what we can
09:24 do here so when I add a audio
09:28 CTA we can actually Define where this
09:31 call to action is going to get launched
09:33 do we want to it after the audio ends
09:36 after it ends for a specific file after
09:40 any marker any marker for a file add a
09:43 Tim stamp and then add a timestamp for a
09:46 particular
09:47 file now let's review some of these so
09:51 after ends basically is if the audio
09:54 ends then trigger this okay now um all
09:58 the options that are for four files
10:00 these are kind of like if you're using a
10:01 playlist you can have ctas for specific
10:05 files within your playlist and what you
10:07 can do is you can actually um
10:09 differentiate them based on the name of
10:12 the file that is currently being
10:15 played so this very powerful because now
10:18 you can have if you have a playlist
10:19 sometimes you want to have different
10:20 ctas based on what audio file is
10:23 actually playing so this allows us to do
10:25 that and we can do that after a after a
10:28 video ends
10:29 um after a particular marker now when we
10:32 set um a we can do on any marker okay
10:36 and then we can also do after a marker
10:38 at a Tim stamp okay so uh if you notice
10:42 up here um I have a time stamp set to
10:45 three if I wanted to trigger a marker
10:48 for that particular timestamp I would
10:51 then say timestamp three now let's say
10:54 my particular audio had multiple time
10:57 stamps or multiple markers let's go
10:59 ahead and show that how you would do
11:00 that so here I would if I want to supply
11:02 multiple markers I could just do a comma
11:04 and let's just say 10 okay so now I have
11:07 markers at 3 seconds and 10 seconds uh
11:11 basically I can go ahead and add a new
11:12 CTA and I would say um after a marker at
11:16 the timestamp and then I would set
11:20 10 so now I have a I can have different
11:23 ctas at 3 seconds and 10
11:26 seconds and as you see you can add
11:28 whatever stack content you want and it
11:31 will be displayed within the
11:33 CTA now uh here you can also turn on and
11:37 off pausing of the media depending on
11:40 what your CTA is or does maybe you want
11:42 to pause the audio maybe you just it
11:44 just is an informational message that
11:47 you purely just want to display but
11:49 allow the audio to continue uh going so
11:53 you can turn that off with this little
11:54 checkbox within each individual
11:57 CTA now if you we have our call to
11:59 action stack uh let's just show how we
12:02 can actually integrate uh call to action
12:04 with audio Pro so here I've added a call
12:07 to action and uh when you have call to
12:10 action you'll notice that there is a new
12:12 audio Pro um trigger so inside here you
12:16 can actually do uh when an audio ends
12:18 when an audio starts or when a marker is
12:22 reached and you'll notice that for each
12:24 of these you have a search URL this
12:26 essentially the same thing as the uh
12:30 file options inside of audio CTA this
12:33 allows you to Target um only a specific
12:36 file that is being played so if you want
12:38 to have external call to actions um for
12:42 different files within a playlist you
12:44 can do that here as well um you can
12:47 Target specific timestamps um the same
12:50 way as you would within the built-in
12:52 call to
12:54 actions uh but then as you know with uh
12:57 call to action you can trigger multiple
12:58 things so here we're triggering our
13:00 peekaboo but you can trigger light boxes
13:02 all kinds of thirdparty stacks as well
13:05 um Foundation stuff um so there's a lot
13:07 of things that a call to action
13:09 integrates with that you can easily um
13:11 launch them as a CTA from audio
13:15 Pro uh you can also do if you uh do
13:18 other analytics based uh outside of
13:20 what's supported inside the audio Pro
13:22 stack itself um you can integrate with
13:24 things like matomo or go squared or
13:27 clicky or uh potentially even a custom
13:30 analytics
13:31 tracker and lastly in the call to action
13:34 demo uh within this project file it's
13:36 similar to what I kind of reviewed now
13:37 just shows you examples of how you can
13:39 have multiple external call to actions
13:41 one that does it when the video starts
13:43 one when the video ends and another one
13:46 when a marker is reached within the
13:48 video so let's show you an example of
13:50 that here so you'll notice here if I go
13:52 ahead and start this we have our call to
13:55 action when the video starts we have a
13:57 call to action when the marker hits and
13:59 then we have a call to action when the
14:01 video ends so obviously that a very
14:03 short video file uh just but it quickly
14:06 shows you how you can actually integrate
14:09 external call to actions um with audio
14:11 Pro