게시판에 음악 넣기

비타주리님의 팁 https://sir.kr/g5_tip/18756을 적용하여 게시판에 mp3음악을 넣어보았습니다. 유용한 소스를 공개해주신 비타주리님께 감사드립니다.
mp3주소, on image, off image, mp3 제목을 입력하기 위하여 여분필드 wr_1~wr_4를 사용하였습니다.
write.skin.php의 적당한 위치(제목위)에 다음 코드를 입력합니다.
[code]<!-- insert music -->
<input type=text class="frm_input full_input" name="wr_1" value="<?php echo $write['wr_1']; ?>" placeholder="mp3_address:wr_1">
<input type=text class="frm_input full_input" name="wr_2" value="<?php echo $write['wr_2']; ?>" placeholder="music_on_image:wr_2">
<input type=text class="frm_input full_input" name="wr_3" value="<?php echo $write['wr_3']; ?>" placeholder="music_off_image:wr_3">
<input type=text class="frm_input full_input" name="wr_4" value="<?php echo $write['wr_4']; ?>" placeholder="mp3_title:wr_4">
<!-- insert music -->[/code]
view.skin.php의 적당한 위치에 다음 코드를 입력합니다.
[code]<!-- insert music -->
<p id="kims" style="font-size:16px;"><?php echo $view['wr_4']; // mp3 title ?></p>
<audio id=myAudio src="<?php echo $view['wr_1']; // mp3 address ?>" loop></audio>
<img id=myImg style=cursor:pointer;display:block>
<span id=currentTimer>00:00</span>
<span id=totalTimer>00:00</span>
<span id=restTimer>00:00</span>
<script>
onImg = "<?php echo $view['wr_2']; // music on image ?>";
offImg = "<?php echo $view['wr_3']; // music off image ?>";
function playAudio() {
myImg.src = offImg;
myAudio.play();
}
function pauseAudio() {
myImg.src = onImg;
myAudio.pause();
}
myImg.onclick = function() {
myAudio.paused ? playAudio() : pauseAudio();
}
myImg.src = onImg;
function trackMode() {
if (myAudio.currentTime > 0) {
if (typeof currentTimer != "undefined") currentTimer.innerText = ("0" + Math.floor(myAudio.currentTime / 60)).slice(-2) + ":" + ("0" + Math.floor(myAudio.currentTime % 60)).slice(-2);
if (typeof totalTimer != "undefined") totalTimer.innerText = ("0" + Math.floor(myAudio.duration / 60)).slice(-2) + ":" + ("0" + Math.floor(myAudio.duration % 60)).slice(-2);
if (typeof restTimer != "undefined") restTimer.innerText = ("0" + Math.floor((myAudio.duration - myAudio.currentTime) / 60)).slice(-2) + ":" + ("0" + Math.floor((myAudio.duration - myAudio.currentTime) % 60)).slice(-2);
}
}
setInterval(trackMode, 500);
</script>
<!-- insert music -->[/code]
댓글 4개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4438 | ||
| 2454 |
|
1년 전 | 1127 | |
| 2453 | 1년 전 | 1058 | ||
| 2452 | 1년 전 | 1628 | ||
| 2451 | 1년 전 | 1161 | ||
| 2450 | 1년 전 | 964 | ||
| 2449 | 1년 전 | 1343 | ||
| 2448 | 1년 전 | 887 | ||
| 2447 | 1년 전 | 1343 | ||
| 2446 | 1년 전 | 1419 | ||
| 2445 | 1년 전 | 1138 | ||
| 2444 | 1년 전 | 1287 | ||
| 2443 | 1년 전 | 1684 | ||
| 2442 | 1년 전 | 1494 | ||
| 2441 | 1년 전 | 1078 | ||
| 2440 | 1년 전 | 1185 | ||
| 2439 | 1년 전 | 4624 | ||
| 2438 | 1년 전 | 1085 | ||
| 2437 | 1년 전 | 1124 | ||
| 2436 | 1년 전 | 935 | ||
| 2435 | 1년 전 | 1567 | ||
| 2434 | 1년 전 | 1461 | ||
| 2433 | 1년 전 | 1025 | ||
| 2432 |
|
1년 전 | 613272 | |
| 2431 |
|
1년 전 | 1101 | |
| 2430 |
|
1년 전 | 1711 | |
| 2429 | 1년 전 | 1318 | ||
| 2428 | 1년 전 | 1277 | ||
| 2427 | 1년 전 | 1153 | ||
| 2426 | 1년 전 | 1114 | ||
| 2425 |
뽕엄능브라
|
1년 전 | 1235 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기