Squarespace Volume with Audio next to Text

[tuanphan]

To add volume with audio next to specific word in Squarespace, like this.

#1.1. First, make word underline

#1.2. Hover on Page where you use Text Block > 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

<!-- 07.26c05v4 Volume with Audio next to Text -->
<script>
window.VolumeTextConfig = {
  sectionSelector: 'section[id*="volume-text"]',
  iconSize: 14,
  iconColor: '#1a1a1a',
  iconRaise: 4,
  iconGap: 4,
  speechLang: 'en-US',
  speechRate: 0.9,
  textColor: '#c0392b',
  underlineColor: ''
};
</script>
<script src="https://code.beaverhero.com/textblock/0726c05v4volumeaudiotext.js"></script>

#2. Customize

#2.1. To change volume icon size/color, you can change Line 05, Line 06

iconSize: 14,
iconColor: '#1a1a1a',

#2.2. To change Underline Text Color, change Line 11

textColor: '#c0392b',

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown under Text Block

Add this code into Markdown

<script>
window.VolumeTextConfig = {
  sectionSelector: 'section[id*="volume-text"]',
  iconSize: 14,
  iconColor: '#1a1a1a',
  iconRaise: 4,
  iconGap: 4,
  speechLang: 'en-US',
  speechRate: 0.9,
  textColor: '#c0392b',
  underlineColor: ''
};
</script>
<script src="https://code.beaverhero.com/textblock/0726c05v4volumeaudiotext.js"></script>