음악 재생기 사용자 정의

15695 단어 
DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>title>
    head>
    <body>
        
<div> 
 <h4 id="name">h4>
 <br>
<audio id="audio" src="  -   (DJ ).mp3 " controls autoplay="true">audio><br/>
div>
<br><br>
<div>
<button id="btn-play" > button>  
<button id="btn-stop" > button>  
<button id="btn-pre" > button>  
<button id="btn-next" > button>  
div>

    body>
    <script>
         
    var btn1 = document.getElementById("btn-play");
        btn1.onclick = function(){
              if(audio.paused){                 
                audio.play();
            }
        }
    
    
    var btn2 = document.getElementById("btn-stop");
        btn2.onclick = function(){
              if(audio.played){                 
                audio.pause();
            }
        }
        
    var music = new Array();
    music = ["MC  -  ","  -   (Live)","  -   (DJ )"];// 
    var num = 0;
    var name = document.getElementById("name");
 
    
    
    var btn3 = document.getElementById("btn-pre");
    btn3.onclick = function(){
            num = (num +2)%3;
             audio.src = music[num]+".mp3";
            name.innerHTML == music[num];
            console.log(music[num])
            audio.play();
        }
        
    
    var btn4 = document.getElementById("btn-next");
    btn4.onclick = function(){
             num = (num +1)%3;
             audio.src = music[num]+".mp3";
            name.innerHTML == music[num];
            audio.play();
        }
    
    audio.addEventListener('ended', function () {  
    btn4.onclick();
}, false);

    script>
html>
file 단추 스타일 수정
Fintech 은행 응용 프로그램 구축을 통해 Golang-4과: 사용자 인증 및 은행 이체 제1부분 학습

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage