Audio Directory

Description

• list (team) section with play icon, click play will play mp3 audio
• view demo – password: abc
• my friend code this, you can buy her a coffee

#1. Install Code

#1.1. Business Plan/higher

If you use Business Plan (Core Plan) or higher, you can follow these steps.

First, add a List (Team) Section (section with (i) icon)

Make sure you choose Simple List

Enable Title, Body, Button

Next, edit Button URL > File > Upload your audio mp3 file

Next, hover on right of section > Click Edit Section

At Anchor Link, enter word: audio-play

Next, add this code to Custom CSS

section[id*="audio-play"] {
    --audio-directory-play-pause-opacity: 0.8;
    --audio-directory-play-pause-border-width: 2px;
    --audio-directory-play-pause-border-color: currentColor;
    --audio-directory-play-pause-size: 32px;
    --audio-directory-play-pause-gap: 14px;
  }
section[id*="audio-play"] .list-item-content__button-wrapper { display: none; } section[id*="audio-play"] .list-item-content { display: flex; align-items: flex-start; gap: var(--audio-directory-play-pause-gap); } section[id*="audio-play"] .tp-play-btn { flex-shrink: 0; margin-top: 2px; width: var(--audio-directory-play-pause-size); height: var(--audio-directory-play-pause-size); border-radius: 50%; border: var(--audio-directory-play-pause-border-width) solid var(--audio-directory-play-pause-border-color); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: inherit; opacity: var(--audio-directory-play-pause-opacity); transition: opacity 0.2s; } section[id*="audio-play"] .tp-play-btn:hover { opacity: 1; } section[id*="audio-play"] .tp-play-btn svg { display: block; pointer-events: none; }

Next, hover on Page where you use List Section > Click Gear icon

Paste this code

<!-- 03.26c28v1 List Audio Play -->
<script>
var TP_AUDIO_CONFIG = {
  sectionSelector: 'section[id*="audio-play"]',
  itemSelector: '.list-item',
  anchorSelector: 'a.list-item-content__button',
  contentSelector: '.list-item-content',
  loop: false,
  volume: 1
};
</script>
<script src="https://code.beaverhero.com/list/0326c28v1listaudio.js"></script>

#1.2. Personal/Basic Plan

First, add a List (Team) Section (section with (i) icon)

Make sure you choose Simple List

Enable Title, Body, Button

Next, edit Button URL > File > Upload your audio mp3 file

Next, hover on right of section > Click Edit Section

At Anchor Link, enter word: audio-play

Next, add this code to Custom CSS

section[id*="audio-play"] {
    --audio-directory-play-pause-opacity: 0.8;
    --audio-directory-play-pause-border-width: 2px;
    --audio-directory-play-pause-border-color: currentColor;
    --audio-directory-play-pause-size: 32px;
    --audio-directory-play-pause-gap: 14px;
  }
section[id*="audio-play"] .list-item-content__button-wrapper { display: none; } section[id*="audio-play"] .list-item-content { display: flex; align-items: flex-start; gap: var(--audio-directory-play-pause-gap); } section[id*="audio-play"] .tp-play-btn { flex-shrink: 0; margin-top: 2px; width: var(--audio-directory-play-pause-size); height: var(--audio-directory-play-pause-size); border-radius: 50%; border: var(--audio-directory-play-pause-border-width) solid var(--audio-directory-play-pause-border-color); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: inherit; opacity: var(--audio-directory-play-pause-opacity); transition: opacity 0.2s; } section[id*="audio-play"] .tp-play-btn:hover { opacity: 1; } section[id*="audio-play"] .tp-play-btn svg { display: block; pointer-events: none; }

Next, add a Markdown Block on current page

Paste this code into Markdown Block

<!-- 03.26c28v1 List Audio Play -->
<script>
var TP_AUDIO_CONFIG = {
  sectionSelector: 'section[id*="audio-play"]',
  itemSelector: '.list-item',
  anchorSelector: 'a.list-item-content__button',
  contentSelector: '.list-item-content',
  loop: false,
  volume: 1
};
</script>
<script src="https://code.beaverhero.com/list/0326c28v1listaudio.js"></script>

#2. Customize

#2.1. To change style of play, pause icon, you can change at Line 02 to Line 06 in Custom CSS

--audio-directory-play-pause-opacity: 0.8;
   --audio-directory-play-pause-border-width: 2px;
   --audio-directory-play-pause-border-color: currentColor;
   --audio-directory-play-pause-size: 32px;
   --audio-directory-play-pause-gap: 14px;

Note: to change color, you can change currentColor to hex value, for example

--audio-directory-play-pause-border-color: #f1f;

#2.2. To make audio loop and change volume of audio, you can adjust these value