김철용

게시판에 음악 넣기

· 2022-06-28 (화) 03:13:45 · 5640 · 4

 

2106540710_1656353890.8957.png

비타주리님의 팁 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]

첨부파일

mp3_insert.zip (76.5 KB) 11회 2022-06-28 03:13
|

댓글 4개

수고 하셨습니다. 감사 합니다.
감사합니다~!
2022-06-28 (화) 15:47:13
철용님 응용해 주셔서 감사합니다
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
22-06-28 조회 5,641
22-06-23 조회 7,339
22-06-22 조회 5,233
22-06-22 조회 5,330
22-06-22 조회 5,287
22-06-21 조회 4,438
22-06-21 조회 5,359
22-06-20 조회 6,036
22-06-20 조회 5,405
22-06-17 조회 4,914
22-06-16 조회 5,505
22-06-16 조회 4,623
22-06-16 조회 4,584
22-06-16 조회 6,177
22-06-15 조회 4,723
22-06-14 조회 5,725
22-06-13 조회 4,622
22-06-13 조회 4,217
22-06-13 조회 4,591
22-06-11 조회 4,867
22-06-10 조회 4,491
22-06-10 조회 5,176
22-06-09 조회 5,125
22-06-09 조회 4,196
22-06-08 조회 6,121
22-06-08 조회 4,676
22-06-07 조회 4,684
22-06-06 조회 5,623
22-06-06 조회 4,569
22-05-31 조회 6,174