In this particular lesson, we will learn how to add audio in Web Stories by using MakeStories. You can apply a single audio file to each slide of Web Stories. You can apply an audio file in one individual slide too. Even you can apply multiple audio files in one Web Story. So start learning!
Hello, and welcome to lesson number 12 of the MakeStories 101 course. In this course, we are going to look at how to add music to your web story in the MakeStories interface.
In the left bar, you will find an option called audio. When you click that, you will see all the audio files that you have uploaded or if you have not uploaded anything yet then you will end up with nothing.
How to upload audio files in MakeStories editor
Now, if you want to upload your own audio file, you can do that. Click on the media library and search for, let's say mp3 files. We will just drag-drop this.
Now, the audio file that you upload will be live in the Audio file. When You hover over the uploaded file, it will show you a play button so you can play and see what this music looks like. In the audio, you will find all the audio files that you have uploaded till date.
Unfortunately at this point of time, we do not have any stock audio files. We are working hard towards getting some, but it's difficult to get the stock audio.
How to apply audio files in the entire story & individual page?
So these are all the audio files, and you might want to use this audio on your story.
To use any of these audio files, click the add button over here. Now, when you click this add button, it will give you an option saying, audio already added to the story? Do you want audio? Add this audio on-page. This would remove the story audio.
Now, this is basically giving you two options. Like, do you want to apply this audio to the entire story or only one page? If you want to apply that audio to the entire story then click on apply to the entire story.
Then click on save changes and preview the story. After previewing the story, you can see that since we have an audio file, we have this audio we can come over the top of the story.
Please remember that by default, the browser behavior does not allow your audio to be auto-played. The user will have to explicitly click this icon and unmute this.
So click the icon and see the audio running throughout the story.
Whenever you add the audio, you can see that the Audio icon is coming up over here. When you hover over it, there are two options that have removed the audio and then play the audio.
Since you have this audio applied to the entire story, click the delete button, and again add the audio file. You can see that this particular audio icon will be there only on this slide that we have applied the audio to.
when we navigate to other slides, it will not show up. So now we will again see how it works. We will preview this.
So on slide one, there is no sound. On slide Two, There is no sound and on slide three, we have the sound. So this way you can apply the audio to the entire story or each page individually.
So let’s say, Here we are on slide three, we have one audio and on slide one, we want to add another audio.
So we will add another one over here and, and now we will click on Unsaved changes. And again preview the story. This way we have applied different audio on different slides.
How to use your files in the MakeStories interface?
Now, if you are using an ad blocker, you might not be able to see this add button that adds audio files on story canvas.
To solve this issue, you will have to white list makestories.io domain in your ad blocker software or disabled ad blocker software for this particular website.
That is how you can use your own audio files in the MakeStories interface.
In the next chapter, we will see how to embed a Twitter tweet, and then We will be almost done with the left panel.
The last option that we have is the add-ons, which are quizzes and polls, which we will see later, once we are done with all the other interfaces, things like the small audio advance, the right panel, and everything. So Quizzes and polls will be coming at the extreme last.
In the next lesson, we will be completing the Twitter tweets and we will be done with almost everything in the left panel.
So see you in the next class.