Background Audio Cool Trick

Hi Bruce,

I have not come across a way to adjust the audio levels. Hopefully someone on here will figure that one out soon.

Belle - you should add a space before and after the line of code. Let me know if this work for you. 

</div>

<audio src="bensound-anewbeginning.mp3" preload="auto" autoplay loop></audio>

</body>
​</html>

Let me know how this works out. Also I noticed that you are using HTML5 - From what I have seen here this trick is not working the same for HTML5 - as far as mobile viewing.  Lets see if the updated code works on a browser with HTML5 - I will run a test on my end as well.

Thanks!

I don't do html coding but I did try this also and it did not work for me.  Does this look right?

</div>
<audio src="27TearsInHeaven.mp4" preload="auto" autoplay loop></audio>

</body>
</html>

I'd like to do this for a class reunion for the people who have passed away.  I don't get any sound, however, and my music file in in the same folder as the html file.

i managed to loop music but i want to mute it in certain slides as i am running video. anyone know how to do it?

Hi Emily,

This is so cool! Thank for posting this. I'm am definitely adding this to my library of tricks.

Hi April, 

Just FYI, I tested this in IE 11, and it worked fine for me.

Hi Tara,

Yes you can adjust the volume. It just requires some additional code. To make this work I changed the audio statement to include and ID:

<audio id="myAudio" src="bensound-jazzyfrenchy.mp3" preload="auto" autoplay loop></audio>

Next, we need a volume control, so I added a very simple HTML volume control on the next line after the audio tag:

<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>

And finally, we the the SetVolume function referenced by the volume control that we just added. Place this script in the head section. I placed it right after the default script block.

<script>
function SetVolume(val)
{
var player = document.getElementById('myAudio');
console.log('Before: ' + player.volume);
player.volume = val / 100;
console.log('After: ' + player.volume);
}
</script>

I've included the modified file for you to look at.

Emily this is brilliant - thank you. It hasn't worked for the particular project I'm working on at the moment as I have different music clips on some slides, and I just wanted to fill in the silences with one background tune, but I then get both tunes playing which I don't want.

I will definitely use this method in the future though.

Hi Emily! 

Great post! Tried it and it worked perfectly. I do have one question. Is it possible to have audio start on different slide. For example after the first slide have the audio begin. I'm just starting to learn HTML so I'm not highly advanced yet. Any info would be much appreciated. Thanks!

Hi Robert,

I am honestly not sure how to get it to start on a different slide. This was one of my first attempts at adding custom code to a published file. If anyone in the community here knows, I am sure they will share.

Glad this post is still helping!!

Thanks for the JavaScript Owen! I was able to modify the script you provided and get my looping audio to begin on slide 3 of my course. Very gratifying. 

Glad it worked out for you.

We tried the steps using SToryline 3, we didn't get the same results. Can anyone help?