Audio can help keep visitors on a page longer, create an emotional connection with your brand, and turn an ordinary visit into a memorable experience.
This post will provide some data on this as well as instructions on adding an audio player to Squarespace (two ways).
#1. Audio Makes Your Brand More Memorable
Sonic branding can increase brand recall by up to 96% compared to relying solely on visual branding, according to Audio Branding Academy. It’s worth noting that this organization specializes in sonic branding, so this figure should be viewed as a best-case scenario rather than a typical outcome.
A 2020 Spotify report found that audio ads generated 24% higher brand recall than visual ads.
Sound is considered a key element of brand communication by 41% of consumers (Treasure, Sound Affects, 2009). Additionally, 74% of younger consumers say they understand a brand’s personality better when they hear its music.
If you use a playlist that matches your brand’s mood - whether energetic, luxurious, or relaxing - visitors can instantly sense that personality without reading a single word.
#2. Audio Can Increase Time Spent on Your Website
One media website reported a 22% increase in average time on page after adding text-to-speech functionality to its articles. Another technology blog saw a 17% increase in returning visitors after just one month. (Source: Speechactors. Since Speechactors is a text-to-speech service provider, these figures should be treated as indicative rather than definitive and may require further validation.)
According to Backlinko, Wistia increased dwell time by 260% simply by adding a video to its content. While this example involves video rather than audio, it provides strong evidence that rich media - including audio - can significantly improve user engagement and keep visitors on a page longer.
In practice, several large publishing platforms, including Hearst Bay Area, have experimented with integrating audio players that allow articles to be listened to instead of read. The result: users were able to consume content more conveniently without skimming through text, leading to a noticeable reduction in bounce rates.
#3. Audio Helps You Reach People Who Prefer Listening Over Reading
Not everyone consumes content by reading. Many people engage with content while driving, working out, cooking, commuting, or multitasking throughout the day. If your website relies solely on text, you may be missing an entire audience segment.
According to Nielsen (2020), 80% of TV viewers are doing something else at the same time. As attention spans continue to shrink and distractions increase, audio offers a more effective way to cut through the noise and engage users than text alone.
Adding audio doesn’t simply mean introducing a new feature to your website - it means opening up an additional channel for reaching audiences you may not have been able to engage before. By making your content accessible in a listenable format, you give users the flexibility to consume it whenever and however it fits into their daily lives.
#4. Audio Works Best When Combined with Visuals
Audio is not just an extra layer added on top of a website - it is the element that helps tie the entire experience together. When sound and visuals align in mood, tone, and style, users can process the message more quickly and remember it more effectively.
Research from Audiodraft found that advertisements with consistent audio-visual branding achieved 14% higher memory encoding than those that used music merely as passive background sound.
An audio player should be placed alongside relevant visuals or content that reinforce the same message and atmosphere. Audio is most effective when it feels like a natural part of the experience - not when it is dropped onto a page without context or purpose.
#5. Not Every Website Should Autoplay Audio
Autoplaying audio is widely considered one of the most frustrating user experiences on the web. The data is quite clear:
According to a Consumer World Survey (2016, n=530), 92.3% of users find autoplay audio annoying, and 76% instinctively mute or stop the sound as soon as it starts.
The same survey found that 70% of users would leave a website if they could not easily turn off autoplay audio, while more than one-third said they would be unlikely to return.
Beyond the UX concerns, there is also a technical limitation. Since 2018, Google Chrome has blocked autoplay audio by default unless the user has already interacted with the page. In other words, even if you enable autoplay, there is a good chance the audio will not play at all.
#6. How to add Audio Player to Squarespace site
We can use Audio Player widget (free) with more style/layout or follow these steps to add custom Audio Player with just a Text Block (of course I will provide copy-paste custom code to change Text to Audio Player style).
#6.1. First, adding a Text Block with Unordered List
#6.2. Highlight text > Click Link icon > File > Upload Audio File (Mp3)
Something like this
#6.3. Hover on top right of section > Click EDIT SECTION
at Design > Anchor Link > enter word: audiobook
#6.4. Hover on Page where you added Text Block > Click Gear icon
Click Advanced > Paste this code
- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #6.9
<!-- 06.26c20v2 Audiobook Player -->
<script>
window.AudiobookConfig = {
coverImage: "https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1757433848909-XZPDGGR0TIS9XJQ7KT2V/imgg-demo-iGikAGoV.png?format=750w",
author: "Alice in Wonderland - Lewis Carroll",
accentColor: "#e8602c",
showPlaylist: true,
coverRadius: "14px",
coverShadow: "0 6px 22px rgba(0,0,0,.12)",
titleColor: "#1a1a1a",
titleSize: "1.35rem",
authorColor: "#777777",
authorSize: "0.95rem",
activeBg: "rgba(0,0,0,.06)",
disableInEdit: true
};
</script>
<script src="https://code.beaverhero.com/textblock/0626c20v2audiobook.js"></script>
#6.5. To change top image, you can change Line 04
coverImage: "https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1757433848909-XZPDGGR0TIS9XJQ7KT2V/imgg-demo-iGikAGoV.png?format=750w",
#6.6. To change Author text under each title, change Line 05
author: "Alice in Wonderland - Lewis Carroll",
#6.7. To change shadow color/image round corners, change Line 09, Line 10
coverRadius: "14px",
coverShadow: "0 6px 22px rgba(0,0,0,.12)",
#6.8. To change Title, Author size/color, change Line 12 to Line 15
titleColor: "#1a1a1a",
titleSize: "1.35rem",
authorColor: "#777777",
authorSize: "0.95rem",
#6.9. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Block under Text Block
Choose Markdown
Paste this code into Markdown
<script>
window.AudiobookConfig = {
coverImage: "https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1757433848909-XZPDGGR0TIS9XJQ7KT2V/imgg-demo-iGikAGoV.png?format=750w",
author: "Alice in Wonderland - Lewis Carroll",
accentColor: "#e8602c",
showPlaylist: true,
coverRadius: "14px",
coverShadow: "0 6px 22px rgba(0,0,0,.12)",
titleColor: "#1a1a1a",
titleSize: "1.35rem",
authorColor: "#777777",
authorSize: "0.95rem",
activeBg: "rgba(0,0,0,.06)",
disableInEdit: true
};
</script>
<script src="https://code.beaverhero.com/textblock/0626c20v2audiobook.js"></script>
