Banner

Social Media Audio Clips

Luxury of light yellow and golden smooth blurred gradient background has a little abstract light. modern of sunlight shadow backdrop for graphic design, Empty wallpaper template for products

Embed

Audio player

Young group of people using mobile phones together at city street.

Text

<h2 style="white-space:pre-line">🎙️ Podcast &amp; YouTube Audio Branding – Sound That Builds Your Identity</h2>
<p class="large" style="white-space:pre-line">Stand out in the crowded digital space with audio branding made for you. From impactful intros and outros to subtle background themes, we design sound that strengthens your brand presence and gives your audience a consistent, professional listening experience.</p>

List

<p class="large"><strong><a href="https://studio55.cloud/custom-jingles">Custom Jingles</a></strong></p>
<p class="large"><a href="https://studio55.cloud/cinematic-music">Cinematic Music</a></p>
<p class="large">Songs for Artists</p>
<p class="large"> </p>

<p class="large"><a href="https://studio55.cloud/podcast-youtube-branding">Podcast &amp; YouTube Audio Branding</a></p>
<p class="large">Social Media Audio Clips</p>
<p class="large">Background &amp; Ambient Music</p>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Waveform Playlist – PAUSA</title>
  
  <script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
  <style>
    :root{
      --bg:#0e0f12;          /* dark background */
      --panel:#16181d;       /* card background */
      --accent:#ff2d55;      /* play button accent */
      --accent-2:#8a8f98;    /* icons/text secondary */
      --text:#e9edf1;        /* primary text */
      --ok:#44d17a;          /* progress */
      --border:#262a31;      /* borders */
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}

    .wrapper{max-width:980px;margin:40px auto;padding:0 16px}
    h1{font-size:26px;margin:0 0 14px}
    .sub{color:#b8bec7;margin:0 0 24px}

    .track{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 14px;display:grid;grid-template-columns:56px 1fr 112px;gap:14px;align-items:center;margin-bottom:12px}
    .meta{display:flex;flex-direction:column;gap:6px}
    .title{font-weight:600}
    .artist{color:#aab2bd;font-size:13px}
    .row{display:flex;align-items:center;gap:10px}

    .btn{height:42px;width:42px;border-radius:999px;border:0;display:grid;place-items:center;background:var(--accent);color:#fff;cursor:pointer}
    .btn:disabled{opacity:.5;cursor:not-allowed}
    .btn.secondary{background:#262a31;color:#fff;border:1px solid #30333a}
    .pill{font-size:12px;color:#c8ced8;background:#1c2027;border:1px solid #2a3038;border-radius:999px;padding:4px 10px}

    .wave{height:56px;border-radius:8px;background:#0b0d11;overflow:hidden}
    .time{min-width:50px;text-align:right;color:#c3c9d2;font-variant-numeric:tabular-nums}

    .actions{display:flex;gap:8px;justify-content:flex-end}
    .actions a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#c9ced6;border:1px solid #2a3038;background:#1c2027;padding:8px 10px;border-radius:10px}
    .actions a:hover{border-color:#3a3f48}

    /* WaveSurfer colors */
    .wave wave{background:transparent}
  </style>
</head>
<body>
  <div class="wrapper">
    <h1>Audio Library</h1>
    <p class="sub">Playlist-style waveform player with play + download per item. Drop into Durable, Webflow, or any HTML block.</p>

    
    <div id="tracks"></div>
  </div>

  <script>
    /**
     * 1) Replace the file URLs below with your own MP3/WAV assets.
     *    You can host files on your domain, AWS S3, Dropbox direct links, or Durable's file storage.
     * 2) Optional: Add "download" to expose a different downloadable file (e.g., WAV while streaming MP3).
     */
    const PLAYLIST = [
      {
        title: 'Cinematic riser & bass boom',
        artist: 'Swoop',
        file: 'https://cdn.pixabay.com/download/audio/2022/03/15/audio_3f5c7.mp3?filename=cinematic-boom-example.mp3',
        download: 'https://cdn.pixabay.com/download/audio/2022/03/15/audio_3f5c7.mp3?filename=cinematic-boom-example.mp3',
      },
      {
        title: 'Vinyl record scratchy stop',
        artist: 'Soundroll',
        file: 'https://cdn.pixabay.com/download/audio/2021/09/17/audio_6b1e0.mp3?filename=vinyl-stop-example.mp3',
      },
      {
        title: 'Whoosh – smooth swoosh',
        artist: 'Locran',
        file: 'https://cdn.pixabay.com/download/audio/2022/03/09/audio_1f9b3.mp3?filename=whoosh-example.mp3',
      },
    ]

    const $ = (sel, el=document) => el.querySelector(sel)
    const $$ = (sel, el=document) => [...el.querySelectorAll(sel)]

    const $list = document.getElementById('tracks')

    // Build DOM for each track
    PLAYLIST.forEach((track, idx) => {
      const card = document.createElement('div')
      card.className = 'track'
      card.innerHTML = `
        <button class="btn primary" aria-label="Play/Pause" data-action="play">
          ▶
        </button>
        <div class="meta">
          <div class="row">
            <span class="title">${track.title}</span>
            <span class="pill">SFX</span>
            <span class="time" data-role="time">00:00</span>
          </div>
          <div class="artist">${track.artist || ''}</div>
          <div class="wave" id="wave-${idx}"></div>
        </div>
        <div class="actions">
          <a href="${track.download || track.file}" download>
            ⬇ Download
          </a>
          <button class="btn secondary" data-action="stop">■</button>
        </div>
      `
      $list.appendChild(card)

      // Create WaveSurfer instance per card
      const ws = WaveSurfer.create({
        container: `#wave-${idx}`,
        url: track.file,
        waveColor: '#394150',
        progressColor: '#44d17a',
        cursorColor: '#c9ced6',
        height: 56,
        barWidth: 2,
        barGap: 2,
        dragToSeek: true,
        autoplay: false,
        interact: true,
        minPxPerSec: 20,
      })

      const playBtn = $('[data-action="play"]', card)
      const stopBtn = $('[data-action="stop"]', card)
      const timeEl = $('[data-role="time"]', card)

      const formatTime = (s) => {
        if (!isFinite(s)) return '00:00'
        const m = Math.floor(s/60).toString().padStart(2,'0')
        const ss = Math.floor(s%60).toString().padStart(2,'0')
        return `${m}:${ss}`
      }

      // Update time display
      ws.on('timeupdate', (t) => { timeEl.textContent = formatTime(t) })
      ws.on('ready', () => { timeEl.textContent = '00:00' })

      // Toggle icons/text on play/pause
      const updatePlayBtn = () => {
        playBtn.textContent = ws.isPlaying() ? '⏸' : '▶'
      }
      ws.on('play', updatePlayBtn)
      ws.on('pause', updatePlayBtn)
      ws.on('finish', () => { ws.seekTo(0); ws.pause(); updatePlayBtn() })

      playBtn.addEventListener('click', () => {
        // Pause all other tracks when one plays
        $$('.track').forEach((el) => {
          if (el !== card) el._wavesurfer?.pause()
        })
        ws.playPause()
      })

      stopBtn.addEventListener('click', () => { ws.stop(); updatePlayBtn() })

      // Keep a reference on the card for global control
      card._wavesurfer = ws
    })
  </script>
</body>
</html>