음악듣기 게시판 정보
게시판 음악듣기 게시판
관련링크
첨부파일
테스트한 버전5.4.5.3
호환 가능 버전5.3 이상 가능학 것 같습니다.
본문
음악듣기 게시판을 만들어보았습니다.
그누보드 - 원형 트랙바 플레이어 업데이트 > 그누보드5 팁자료실 (sir.kr) , 그누보드 - 내 맘대로 썸네일 Basic형 게시판 > 그누보드5 스킨 (sir.kr) 을 사용하여 만들었습니다.
유용한 자료를 공개해주신 비타주리님께 감사드립니다.
압축을 풀면 audio_pc, audio_mobile 두개의 폴더가 나옵니다.
그누보드 순정기준으로
audio_pc는 skin/board/audio_pc 경로가 되도록 업로드해줍니다.
audio_mobile는 mobile/skin/board/audio_mobile 경로가 되도록 업로드합니다.
글쓰기입니다.
1번째, mp3 파일 주소를 적어줍니다. <예>https://example.com/audio/mysong.mp3
2번째, 원형트랙바에 나타나는 이미지 주소를 적어줍니다. <예>https://example.com/images/myimage.png
3번째, 리스트에 나타나는 이미지 주소를 적어줍니다. <예>https://example.com/images/myimage2.png
2번과 3번의 이미지가 동일해도 상관없습니다.
4번째, pc 원형트랙의 크기를 따옴표없이 숫자로 적어줍니다. <예>500
5번째, mobile 원형트랙의 크기를 따옴표없이 숫자로 적어줍니다. <예>300
6번째, 원형트랙바의 재생전 칼라를 16진수 색상값으로 적어줍니다. <예>#9a9a9c
7번째, 원형트랙바의 재생후 칼라를 16진수 색상값으로 적어줍니다. <예>#7b090b
https://www.w3schools.com/colors/colors_picker.asp 여기에서 원하는 색상을 복사해서 붙여넣기하시면 쉽게 하실수 있습니다.
리스트에서 바로 음악이 재생할 수있게 버튼을 넣었습니다.
리스트에 보이는 썸네일은 글쓰기에서 공백으로 남겨두면 나타나지 않고 일반 게시판으로 됩니다.
썸네일의 크기와 radius는 list.skin.php상단에 있는 css에서 조절하시면 됩니다.
<style>
.thumbnailImage { width:120px; height:120px; border-radius:20px; object-fit:cover; margin-left:10px; margin-right:10px; }
</style>
view.skin.php 의 원형트랙안에 나타나는 재생시간, 버튼의 위치와 투명도는 view.skin.php 에서 css로 조절하시면 됩니다.
<style>
.timerText { color:#ffffff; font-size:1rem; font-weight:bold;padding-top: 150px; opacity: 0.8;}
#playerButton{ padding-top: 150px; }
</style>자세한 사항은 위의 링크를 참고하시면 될 것같습니다.
write.skin.php
<!-- audio start -->
<div class="bo_w_info write_div">
<label for="wr_1" class="sound_only">mp3 주소입력<strong>필수</strong></label>
<input type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" required class="frm_input full_input required" placeholder="MP3 파일주소입력:<예>https://example/audio/song.mp3">
<label for="wr_2" class="sound_only">view.skin.php Image Path<strong>필수</strong></label>
<input type="text" name="wr_2" value="<?php echo $write['wr_2'] ?>" id="wr_2" required class="frm_input full_input required" placeholder="view.skin.php Image Path:<예>https://example/image/pic.png">
<label for="wr_3" class="sound_only">list.skin.php Image Path<strong>필수</strong></label>
<input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" class="frm_input full_input " placeholder="view.skin.php Image Path:<예>https://example/image/pic2.png">
<label for="wr_4" class="sound_only">PC Size<strong>필수</strong></label>
<input type="text" name="wr_4" value="<?php echo $write['wr_4'] ?>" id="wr_3" required class="frm_input full_input required" placeholder="PC Audio Size:<예>500">
<label for="wr_5" class="sound_only">Mobile Size<strong>필수</strong></label>
<input type="text" name="wr_5" value="<?php echo $write['wr_5'] ?>" id="wr_5" required class="frm_input full_input required" placeholder="Mobile Audio Size:<예>300">
<label for="wr_5" class="sound_only">playerBorder<strong>필수</strong></label>
<input type="text" name="wr_6" value="<?php echo $write['wr_6'] ?>" id="wr_6" required class="frm_input full_input required" placeholder="playerBorder:<예>10">
<label for="wr_7" class="sound_only">baseColor<strong>필수</strong></label>
<input type="text" name="wr_7" value="<?php echo $write['wr_7'] ?>" id="wr_7" required class="frm_input full_input required" placeholder="baseColor:<예>#9a9a9c">
<label for="wr_8" class="sound_only">trackColor<strong>필수</strong></label>
<input type="text" name="wr_8" value="<?php echo $write['wr_8'] ?>" id="wr_8" required class="frm_input full_input required" placeholder="baseColor:<예>#7b090b">
</div>
<!-- audio end -->
list.skin.php
<style>
.thumbnailImage { width:120px; height:120px; border-radius:20px; object-fit:cover; margin-left:10px; margin-right:10px; }
</style>
<div class="tbl_head01 tbl_wrap">
<table>
<caption><?php echo $board['bo_subject'] ?> 목록</caption>
<thead>
<tr>
<?php if ($is_checkbox) { ?>
<th scope="col" class="all_chk chk_box">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
<label for="chkall">
<span></span>
<b class="sound_only">현재 페이지 게시물 전체선택</b>
</label>
</th>
<?php } ?>
<th scope="col">번호</th>
<th scope="col">제목</th>
<th scope="col">MP3</th>
<th scope="col">글쓴이</th>
<th scope="col"><?php echo subject_sort_link('wr_hit', $qstr2, 1) ?>조회 </a></th>
<?php if ($is_good) { ?><th scope="col"><?php echo subject_sort_link('wr_good', $qstr2, 1) ?>추천 </a></th><?php } ?>
<?php if ($is_nogood) { ?><th scope="col"><?php echo subject_sort_link('wr_nogood', $qstr2, 1) ?>비추천 </a></th><?php } ?>
<th scope="col"><?php echo subject_sort_link('wr_datetime', $qstr2, 1) ?>날짜 </a></th>
</tr>
</thead>
<tbody>
<?php
for ($i=0; $i<count($list); $i++) {
if ($i%2==0) $lt_class = "even";
else $lt_class = "";
?>
<tr class="<?php if ($list[$i]['is_notice']) echo "bo_notice"; ?> <?php echo $lt_class ?>">
<?php if ($is_checkbox) { ?>
<td class="td_chk chk_box">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>" class="selec_chk">
<label for="chk_wr_id_<?php echo $i ?>">
<span></span>
<b class="sound_only"><?php echo $list[$i]['subject'] ?></b>
</label>
</td>
<?php } ?>
<td class="td_num2">
<?php
if ($list[$i]['is_notice']) // 공지사항
echo '<strong class="notice_icon">공지</strong>';
else if ($wr_id == $list[$i]['wr_id'])
echo "<span class=\"bo_current\">열람중</span>";
else
echo $list[$i]['num'];
?>
</td>
<!--썸네일리스트 시작-->
<td class="td_subject" style="padding-left:<?php echo $list[$i]['reply'] ? (strlen($list[$i]['wr_reply'])*10) : '0'; ?>px">
<?php
if ($is_category && $list[$i]['ca_name']) {
?>
<a href="<?php echo $list[$i]['ca_name_href'] ?>" class="bo_cate_link"><?php echo $list[$i]['ca_name'] ?></a>
<?php } ?>
<div class="bo_tit">
<a href="<?php echo $list[$i]['href'] ?>" style=text-decoration:none>
<img onerror=style.display='none' class=thumbnailImage src=<?php echo $list[$i]['wr_3']; ?>>
<?php echo $list[$i]['icon_reply'] ?>
<?php if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']); ?>
<span style=margin-left:10px onmouseover=style.opacity=0.5 onmouseout=style.opacity=1><?php echo $list[$i]['subject'] ?></span>
</a>
<?php
if ($list[$i]['icon_new']) echo "<span class=\"new_icon\">N<span class=\"sound_only\">새글</span></span>";
// if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }
if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);
if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);
if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);
?>
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span><span class="cnt_cmt"><?php echo $list[$i]['wr_comment']; ?></span><span class="sound_only">개</span><?php } ?>
</div>
</td>
<!--썸네일리스트 종료-->
<!-- 음악넣기 시작 -->
<td class="td_name sv_use" style="text-align:center;padding-left:20px;">
<div style="width:30px;height:30px;overflow:hidden;box-sizing:initial;border-radius:50%;border:1px solid #cccccc;">
<audio id="myAudio" style="height:30px;margin-left:-11px" src="<?php echo $list[$i]['wr_1'] ?>" loop controls></audio>
<div>
</td>
<!-- 음악넣기 종료 -->
<td class="td_name sv_use" style="text-align:center;padding-left:5px;"><?php echo $list[$i]['name'] ?></td>
<td class="td_num"><?php echo $list[$i]['wr_hit'] ?></td>
<?php if ($is_good) { ?><td class="td_num"><?php echo $list[$i]['wr_good'] ?></td><?php } ?>
<?php if ($is_nogood) { ?><td class="td_num"><?php echo $list[$i]['wr_nogood'] ?></td><?php } ?>
<td class="td_datetime"><?php echo $list[$i]['datetime2'] ?></td>
</tr>
<?php } ?>
<?php if (count($list) == 0) { echo '<tr><td colspan="'.$colspan.'" class="empty_table">게시물이 없습니다.</td></tr>'; } ?>
</tbody>
</table>
</div>
view.skin.php
<!-- mp3 player insert start -->
<style>
.timerText { color:#ffffff; font-size:1rem; font-weight:bold;padding-top: 150px; opacity: 0.8;}
#playerButton{ padding-top: 150px; }
</style>
<div id=circlePlayer style="margin:0 auto"></div>
<script>
pcSize=<?php echo $view['wr_4'] ?>;
mobileSize=<?php echo $view['wr_5'] ?>;
playerBorder=<?php echo $view['wr_6'] ?>;
baseColor= "<?php echo $view['wr_7'] ?>";
trackColor= "<?php echo $view['wr_8'] ?>";
mp3Url="<?php echo $view['wr_1'] ?>";
imageUrl="<?php echo $view['wr_2'] ?>";
playButton="<?php echo $board_skin_url;?>/img/play.png";
stopButton="<?php echo $board_skin_url;?>/img/pause.png";
</script>
<!-- wittazzirri_2 -->
<script>
playerSize = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? mobileSize : pcSize;
trackCanvas = "<canvas id=trackBar width=" + playerSize + " height=" + playerSize + "></canvas>";
trackPart = "<div id=trackDiv style='width:100%;height:100%;background-color:" + baseColor + ";clip-path:circle(50% at 50% 50%)'>" + trackCanvas + "</div>";
trackTable = "<table style='width:100%;height:100%;table-layout:fixed;clip-path:circle(50% at 50% 50%)' cellpadding=0 cellspacing=0><td id=currentTimer class=timerText align=right></td><td align=center><img id=playerButton style=cursor:pointer;opacity:0.8></td><td id=totalTimer class=timerText align=left></td></table>";
circlePlayer.innerHTML = trackPart + "<div id=playerCenter style=position:relative;background-size:cover;background-position:center;border-radius:50%>" + trackTable + "</div><audio id=mp3Media loop></audio>";
circlePlayer.style.width = circlePlayer.style.height = playerSize + "px";
with (playerCenter.style) {
width = height = playerSize - playerBorder * 2 + "px";
backgroundImage = "url(" + imageUrl + ")";
marginTop = -(playerSize - playerBorder) + "px";
marginLeft = playerBorder + "px";
}
mp3Media.src = mp3Url;
function mp3Stop() {
mp3Media.pause();
playerButton.src = playButton;
onMode = 0;
}
function mp3Play() {
mp3Media.play();
playerButton.src = stopButton;
onMode = 1;
}
mp3Stop();
function currentAngle() {
if (arguments[1] == arguments[3]) normalAngle = arguments[2] < arguments[0] ? -90 : 90;
else if (arguments[0] == arguments[2] && arguments[3] > arguments[1]) normalAngle = 180;
else {
normalAngle = Math.atan((arguments[2] - arguments[0]) / (arguments[1] - arguments[3])) * 180 / Math.PI;
if (arguments[3] > arguments[1] && arguments[2] > arguments[0]) normalAngle = 180 + normalAngle;
else if (arguments[3] > arguments[1] && arguments[2] < arguments[0]) normalAngle = -180 + normalAngle;
}
eventAngle = normalAngle < 0 ? normalAngle + 360 : normalAngle;
return eventAngle;
}
tw = trackBar.width;
cw = trackBar.width / 2;
bw = trackBar.width / 90;
function trackDraw() {
clip = trackBar.getContext("2d");
clip.beginPath();
clip.moveTo(cw, cw);
clip.lineTo(arguments[0], arguments[1]);
clip.lineTo(arguments[2], arguments[3]);
clip.lineTo(arguments[4], arguments[5]);
clip.lineTo(arguments[6], arguments[7]);
clip.lineTo(arguments[8], arguments[9]);
clip.lineTo(arguments[10], arguments[11]);
clip.lineTo(cw, cw);
clip.closePath();
clip.fillStyle = trackColor;
clip.fill();
}
function trackPoint() {
trackDiv.innerHTML = trackCanvas;
if (arguments[0] == 0) trackDraw(cw, cw, cw, cw, cw, cw, cw, cw, cw, cw, cw, cw);
for (track45 = 1; track45 <= 45; track45++) if (arguments[0] == track45) trackDraw(cw, 0, cw + bw * track45, 0, cw, cw, cw, cw, cw, cw, cw, cw);
for (track135 = 1; track135 <= 90; track135++) if (arguments[0] == track135 + 45) if (arguments[0] == track135 + 45) trackDraw(cw, 0, tw, 0, tw, bw * track135, cw, cw, cw, cw, cw, cw);
for (track225 = 1; track225 <= 90; track225++) if (arguments[0] == track225 + 135) trackDraw(cw, 0, tw, 0, tw, tw, tw - bw * track225, tw, cw, cw, cw, cw);
for (track315 = 1; track315 <= 90; track315++) if (arguments[0] == track315 + 225) trackDraw(cw, 0, tw, 0, tw, tw, 0, tw, 0, tw - bw * track315, cw, cw);
for (track360 = 1; track360 <= 45; track360++) if (arguments[0] == track360 + 315) trackDraw(cw, 0, tw, 0, tw, tw, 0, tw, 0, 0, bw * track360, 0);
}
countNumber = onMode = 0;
function trackMode() {
countNumber = Math.round(360 * mp3Media.currentTime / mp3Media.duration);
trackPoint(countNumber);
if (typeof currentTimer != 'undefined') currentTimer.innerText = ('0' + Math.floor(mp3Media.currentTime / 60)).slice(-2) + ':' + ('0' + Math.floor(mp3Media.currentTime % 60)).slice(-2);
if (typeof totalTimer != 'undefined') totalTimer.innerText = ('0' + Math.floor(mp3Media.duration / 60)).slice(-2) + ':' + ('0' + Math.floor(mp3Media.duration % 60)).slice(-2);
}
setInterval(trackMode, 500);
playerButton.onclick = function() {
onMode ? mp3Stop() : mp3Play();
trackDiv.style.cursor = 'pointer';
trackDiv.onmousedown = function() {
mp3Media.currentTime = currentAngle(playerSize / 2, playerSize / 2, arguments[0].offsetX, arguments[0].offsetY) * mp3Media.duration / 360;
mp3Play();
}
}
</script>
<!-- /wittazzirri_2 -->
<!-- mp3 player insert end -->
추천
9
9
댓글 전체
좋으네요. 추천합니다^^
추천해주셔서 감사드립니다. 푸른산타님 올해 잘 마무리하시고 새로운 새해 맞으시길 기원합니다.
수고 하셨습니다. 감사 합니다.
늘 관심을 가져주시고 격려해주셔서 감사드립니다. 들레아빠님 올해 잘 마무리하시고 새로운 새해 맞으시길 기원합니다^^
좋은 말씀 감사 합니다. 철용씨도 가내 두루 평온 하시길 바랍니다.
감사합니다.
관심가져주셔서 감사드립니다. 트리플님 올해 잘 마무리하시고 새로운 새해 맞으시길 기원합니다.^^
파이팅
파이팅!! 열린이글님 올해 잘 마무리하시고 새로운 새해 맞으시길 기원합니다^^
멋집니다. 감사합니다
격려의 말씀 감사드립니다. teemall님 올해 잘 마무리하시고 새로운 새해 맞으시길 기원합니다.
멋진 스킨 추천합니다
캄사하므니다.
감사합니다
감사합니다 잘듣고 있습니다
