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