Audiobook Player – @tuanphan

Description

adding Audiobook Player with custom title/image/controls
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, adding a Text Block with Unordered List

#1.2. Highlight text > Click Link icon > File > Upload Audio File (Mp3)

Something like this

#1.3. Hover on top right of section > Click EDIT SECTION

at Design > Anchor Link > enter word: audiobook

#1.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 #3.1

<!-- 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>

#2. Customize

#2.1. 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",

#2.2. To change Author text under each title, change Line 05

author: "Alice in Wonderland - Lewis Carroll",

#2.3. To change shadow color/image round corners, change Line 09, Line 10

coverRadius: "14px",
  coverShadow: "0 6px 22px rgba(0,0,0,.12)",

#2.4. To change Title, Author size/color, change Line 12 to Line 15

titleColor: "#1a1a1a",
  titleSize: "1.35rem",
  authorColor: "#777777",
  authorSize: "0.95rem",

#3. Other

#3.1. 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>