그누보드 mp3
페이지 정보
본문
[root@localhost widget]# vi /home/sein/www/ksip.php
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 사이트</title>
<style>
body, html { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-family: sans-serif; }
/* SCM 스타일 슬림 바 */
#scm-player {
position: fixed; top: 0; left: 0; width: 100%; height: 25px;
background: rgba(20, 20, 20, 0.9); color: #eee;
display: flex; align-items: center; justify-content: space-between;
padding: 0 15px; z-index: 9999; box-shadow: 0 1px 5px rgba(0,0,0,0.5);
font-size: 12px; border-bottom: 1px solid #333;
}
.player-info { display: flex; align-items: center; gap: 15px; overflow: hidden; white-space: nowrap; }
.song-title { color: #00bbff; font-weight: bold; margin-right: 5px; }
/* 오디오 태그 스타일 */
audio { height: 20px; opacity: 0.8; filter: invert(100%); }
#content-frame {
position: absolute; top: 26px; left: 0; width: 100%;
/* 흐르는 텍스트 */
.track-box { width: 250px; overflow: hidden; position: relative; }
.marquee {
display: inline-block; padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* 재생 목록 버튼 및 레이어 */
.list-btn { cursor: pointer; color: #00bbff; margin-left: 10px; font-weight: bold; }
#playlist-layer {
position: absolute; top: 25px; right: 10px; width: 300px;
background: rgba(20, 20, 20, 0.95); border: 1px solid #333;
display: none; z-index: 10000; max-height: 200px; overflow-y: auto;
}
.playlist-item { padding: 8px; border-bottom: 1px solid #333; cursor: pointer; font-size: 11px; }
.playlist-item:hover { background: #333; }
.playlist-item.active { color: #00bbff; }
</style>
</head>
<body>
<div id="scm-player">
<div class="player-info">
<div class="track-box">
<div class="marquee" id="marquee-text">
<span class="song-title">NOW PLAYING:</span> 불러오는 중...
</div>
</div>
<span class="list-btn" onclick="togglePlaylist()">LIST ☰</span>
</div>
<div style="display: flex; align-items: center; gap: 10px;">
<audio id="audio-player" controls></audio>
</div>
<div id="playlist-layer"></div>
</div>
<iframe id="content-frame" src="./index.php?inner=true"></iframe>
<script>
// 1. 여기에 재생할 곡들을 추가하세요.
const tracks = [
{ title: "두 번째 노래 제목", url: "https://sein.quail.kr/data/music/test.mp3" },
{ title: "세 번째 노래 제목", url: "https://sein.quail.kr/data/music/test3.mp3" }
];
let currentTrack = 0;
const player = document.getElementById('audio-player');
const marquee = document.getElementById('marquee-text');
const layer = document.getElementById('playlist-layer');
// 초기화: 목록 생성 및 첫 곡 로드
function init() {
tracks.forEach((track, idx) => {
const div = document.createElement('div');
div.className = 'playlist-item';
div.innerHTML = (idx + 1) + ". " + track.title;
div.onclick = () => playTrack(idx);
layer.appendChild(div);
});
playTrack(0);
}
// 특정 곡 재생 함수
function playTrack(idx) {
currentTrack = idx;
player.src = tracks[idx].url;
marquee.innerHTML = `<span class="song-title">NOW PLAYING:</span> ` + tracks[idx].title;
// 활성화 표시
const items = document.querySelectorAll('.playlist-item');
items.forEach((item, i) => item.classList.toggle('active', i === idx));
//자동재생방지
// player.play();
layer.style.display = 'none'; // 재생 시작 시 목록 닫기
}
// 곡이 끝나면 다음 곡으로
player.onended = function() {
currentTrack = (currentTrack + 1) % tracks.length;
playTrack(currentTrack);
};
function togglePlaylist() {
layer.style.display = (layer.style.display === 'block') ? 'none' : 'block';
}
init();
</script>
</body>
</html>
- 다음글LH 공고문 크롤링 한거 사이트에 위젯으로 출력 26.02.12
댓글목록
세인님의 댓글
세인 아이피 (192.♡.0.1) 작성일
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
라이브러리 (이건 head에 추가)
세인님의 댓글
세인 아이피 (192.♡.0.1) 작성일
페이지 이동할때마다 재생이 끊김
세션을 유지하면서 재생할 수 있도록 수정 필요
세인님의 댓글
세인 아이피 (118.♡.13.188) 작성일
컨테이너 잘못감싼듯 게시글이 다 깨지네
퇴근 후 수정 필
세인님의 댓글의 댓글
세인 아이피 (192.♡.0.1) 작성일https://sein.quail.kr/ksip.php 페이지 분리 후 테스트
세인님의 댓글
세인 아이피 (192.♡.0.1) 작성일수정완