게시판view.skin.php하단에 삽입 > 팁 자쇼실

<?php // 링크 1번에 주소가 있고, 그 주소에 mp3 확장자가 포함되어 있으면 플레이어를 실행합니다. if (isset($view['link'][1]) && preg_match("/\.(mp3|wma|wav|ogg|m4a)/i", $view['link'][1])) { ?> <link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet"> <style> #playerDiv { position:fixed; left:0px; bottom:0px; height:50px; padding:0px 25px; display:flex; justify-content:space-between; align-items:center; gap:15px; box-sizing:border-box; border-top:1px solid #cccccc; background:linear-gradient(#fefefe 50%, #cccccc 50%); z-index:9999; } #playerDiv .player-button { color:#900000; font-size:16px; font-family:Lato; font-weight:bold; cursor:pointer; } #playerDiv .player-timer { color:#000000; font-size:16px; font-family:Lato; font-weight:bold; } #playerBar { display:block; height:12px; cursor:pointer; appearance:none; } #playerBar::-webkit-progress-value { background-color:#900000; border-radius:6px; } #playerBar::-webkit-progress-bar { background-color:#eeeeee; border-radius:6px; border:1px solid #cccccc; } </style> <div id="playerDiv"> <span class="player-button" onclick="document.getElementById('mediaPlayer').play()">PLAY</span> <span class="player-timer">00:00</span> <progress id="playerBar"></progress> <span class="player-timer">00:00</span> <span class="player-button" onclick="document.getElementById('mediaPlayer').pause()">STOP</span> <audio id="mediaPlayer" src="<?php echo strip_tags($view['link'][1]); ?>" autoplay loop></audio> </div> <script> (function() { var mediaPlayer = document.getElementById('mediaPlayer'); var playerBar = document.getElementById('playerBar'); var playerDiv = document.getElementById('playerDiv'); setInterval(() => { if (mediaPlayer.duration > 0) { playerBar.max = Math.floor(mediaPlayer.duration); playerBar.value = Math.floor(mediaPlayer.currentTime); document.querySelectorAll(".player-timer")[0].innerText = ("0" + Math.floor(mediaPlayer.currentTime / 60)).slice(-2) + ":" + ("0" + Math.floor(mediaPlayer.currentTime % 60)).slice(-2); document.querySelectorAll(".player-timer")[1].innerText = ("0" + Math.floor(mediaPlayer.duration / 60)).slice(-2) + ":" + ("0" + Math.floor(mediaPlayer.duration % 60)).slice(-2); } }, 500); playerBar.onmousedown = (event) => { mediaPlayer.currentTime = event.offsetX * playerBar.max / playerBar.offsetWidth; mediaPlayer.play(); } window.addEventListener("resize", playerSize = function() { playerDiv.style.width = document.documentElement.clientWidth + "px"; playerBar.style.width = playerDiv.offsetWidth - 284 + "px"; }); playerSize(); })(); </script> <?php } ?>