Log-2024-09-16

  1{{/* audio.html */}}
  2
  3<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  4
  5{{ $link := .Get "link" }}
  6{{ $img := .Get "img" }}
  7{{ $txt := .Get "txt" }}
  8{{ $src := .Get "src" }}
  9{{ $uniqueID := .Get "id" }}
 10
 11<div class="player" id="{{ $uniqueID }}">
 12    <div class="imgBx">
 13        <img src="{{ $img }}">
 14    </div>
 15    <div class="text-content">
 16        <a href="{{ $link }}" class="button mt-1" target="_blank" rel="noopener noreferrer">{{ $txt }}</a>  <!-- class "button" is defined in this theme -->
 17    </div>
 18    <audio class="audio-player">
 19        <source src="{{ $src }}" type="audio/mpeg">
 20    </audio>
 21    <button class="play-btn"><i class="fas fa-play"></i></button>
 22</div>
 23
 24<style>
 25    .player * {
 26        margin: 0;
 27        padding: 0;
 28        box-sizing: border-box;
 29    }
 30
 31    .player {
 32        width: 300px;
 33        background-color: rgba(0, 119, 184, 0.15);
 34        padding: 20px 14px 8px 14px;
 35        border: none;
 36        border-radius: 1.5rem;
 37        box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25rem 1rem;
 38        position: relative;
 39        text-align: center;
 40    }
 41
 42    .imgBx img {
 43        width: 100%;
 44        height: auto;
 45        border: solid;
 46        border-radius: 1.5rem;
 47    }
 48
 49    .text-content {
 50        margin: 3px 0;
 51        padding: 0.5rem 1.5rem;
 52
 53    }
 54
 55    .text-content a {
 56        color: #ffffff;
 57
 58        font-size: 16px;
 59
 60        text-decoration: none;
 61    }
 62
 63    .audio-player {
 64        display: none;
 65    }
 66
 67    .play-btn {
 68        background: #0077b8;
 69        border: none;
 70        border-radius: 50%;
 71        width: 50px;
 72        height: 50px;
 73        font-size: 24px;
 74        cursor: pointer;
 75        position: absolute;
 76        top: 50%;
 77        left: 50%;
 78        transform: translate(-50%, -50%);
 79    }
 80
 81    .play-btn:hover {
 82        background: #003553;
 83    }
 84
 85    .play-btn i {
 86        color: #fff;
 87    }
 88</style>
 89
 90<script>
 91    (function () {
 92        const playerId = "{{ $uniqueID }}";
 93        const audioPlayer = document.querySelector(`#${playerId} .audio-player`);
 94        const playButton = document.querySelector(`#${playerId} .play-btn`);
 95        playButton.addEventListener('click', () => {
 96            if (audioPlayer.paused) {
 97                audioPlayer.play();
 98                playButton.innerHTML = '<i class="fas fa-pause"></i>';
 99            } else {
100                audioPlayer.pause();
101                playButton.innerHTML = '<i class="fas fa-play"></i>';
102            }
103        });
104        audioPlayer.addEventListener('ended', () => {
105            playButton.innerHTML = '<i class="fas fa-play"></i>';
106        });
107    })();
108</script>