Audio Block to Audio Play Icon

Description

change audio block to audio icon, when users play audio, will change play icon to pause icon
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Make sure you added Audio Block

#1.2. Hover on Page where you added Audio Blocks > Click Gear icon

#1.3. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 08.26c09v1 Audio Block to Audio Play Icon -->
<script>
  window.AudioIconConfig = {
    iconSize: 25,
    circleSize: 40,
    borderColor: '#000',
    iconColor: '#111111',
    activeIcon: 'pause'
  };
</script>
<script src="https://code.beaverhero.com/audio/0826c09v1audioblockaudioicon.js"></script>

#2. Customize

#2.1. To change icon style, change these lines

iconSize: 25,
circleSize: 40,
borderColor: '#000',
iconColor: '#111111',

#2.2. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Audio Blocks) > Add a Block > Choose Markdown

Add this code into Markdown

<script>
  window.AudioIconConfig = {
    iconSize: 25,
    circleSize: 40,
    borderColor: '#000',
    iconColor: '#111111',
    activeIcon: 'pause'
  };
</script>
<script src="https://code.beaverhero.com/audio/0826c09v1audioblockaudioicon.js"></script>