As we have done with the other components, make sure that you have your column and row framework set up on the page to start with, then simply click on the audio component/tool drag and drop it into either the row or column that you want the audio to appear on the screen.
(remember you can only drop when you the row or column turns blue and says drop component here!)
Click on the folder in the component and this will then bring up the resource manager file up. Select your audio file, this will now load and show on the screen.
You can only load mp3's with a max size of 50mb
Let's look at the Simple setting you will see that you have a few settings to pick from:
Now you can select if you want any actions linked to the audio component.
In this example I am going to set the audio so that when it is paused the expandable section opens
To do this I will set the following actions:
on audio: audio paused (but you have more options)
change: I have selected expandable section 1 for the example (but if you have multiple components on the page then select which one you want)
to view: expanded (I have selected this as I want the expandable section to open when the audio is paused)
The last two setting are completion and visibility options, here you can disable a component and hide it until the audio has been listened too. I have added an image that I don't want to be shown until the audio has been played.
See the short video below to see it all together 😊