버튼 클릭시 jQuery를 사용하여 오디오 파일 재생

Question 1

버튼을 클릭 할 때 오디오 파일을 재생하려고하는데 작동하지 않습니다. 내 HTML 코드는 다음과 같습니다.

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

내 JavaScript는 다음과 같습니다.

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

나는 그것을 위해 Fiddle 도 만들었 습니다.

Question 2

어떤 접근법?

당신은 오디오를 재생할 수 있습니다 <audio>태그 또는 <object>나 <embed>. Lazy loading (필요할 때로드) 크기가 작은 경우 사운드가 가장 좋은 방법입니다. 오디오 요소를 동적으로 만들 수 있으며로드되면로 시작하고로 .play()일시 중지 할 수 있습니다 .pause().

우리가 사용한 것들

canplay이벤트를 사용 하여 파일을 재생할 준비가되었는지 확인합니다.

.stop()오디오 요소에 대한 기능 이 없습니다 . 일시 중지 만 할 수 있습니다. 그리고 오디오 파일의 처음부터 시작하려면 .currentTime. 이 행을 예제에서 사용합니다 audioElement.currentTime = 0;. .stop()기능 을 얻기 위해 먼저 파일을 일시 중지 한 다음 시간을 재설정합니다.

오디오 파일의 길이와 현재 재생 시간을 알고 싶을 수 있습니다. 우리 .currentTime가 사용하는 길이를 배우기 위해 위에서 이미 배웠습니다 .duration.

예제 가이드

문서가 준비되면 오디오 요소를 동적으로 만들었습니다.
재생하려는 오디오로 소스를 설정합니다.
파일을 다시 시작하기 위해 '종료'이벤트를 사용했습니다.

currentTime이 지속 시간과 같으면 오디오 파일 재생이 중지됩니다. 를 사용할 때마다 play()처음부터 시작됩니다.

timeupdate오디오가 .currentTime변경 될 때마다 현재 시간을 업데이트하기 위해 이벤트를 사용 했습니다 .
canplay파일을 재생할 준비가되면 이벤트를 사용 하여 정보를 업데이트했습니다.
재생, 일시 중지, 다시 시작 버튼을 만들었습니다.

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

스 니펫 확장

Question 3

$("#myAudioElement")[0].play();

$("#myAudioElement").play()예상대로 작동하지 않습니다 . 공식적인 이유는 jQuery에 통합하면 play()모든 단일 요소에 메서드 가 추가되어 불필요한 오버 헤드가 발생하기 때문입니다. 따라서 대신 검색하는 DOM 요소 배열의 위치 ( $("#myAudioElement")일명 0)로 참조해야합니다.

이 인용문은 "feature / wontfix"로 종료 된 버그에 대해 제출 된 것입니다 .

이를 위해 각 DOM 요소 메서드 이름에 대해 jQuery 메서드 이름을 추가해야합니다. 그리고 물론 그 방법은 미디어가 아닌 요소에 대해 아무것도하지 않으므로 추가 바이트를 사용할 가치가없는 것 같습니다.

Question 4

다른 사람을 위해 Ahmet의 답변을 취하고 여기 에서 원래 asker 의 jsfiddle을 업데이트했습니다 .

audio.mp3

...에 대한

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

웹에서 자유롭게 사용할 수있는 mp3로 연결. 쉬운 솔루션을 공유해 주셔서 감사합니다!

Question 5

여기에는 대체 기능이있는 멋지고 다양한 솔루션이 있습니다.

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

그런 다음 원하는만큼 오디오를 초기화 할 수 있습니다.

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

이제 다음과 같은 간단한 이벤트 호출을 통해 원하는 곳에서 초기화 된 오디오 요소에 도달 할 수 있습니다.

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

JSFiddle 데모

이것은 내가 JQuery와 함께 사용하는 것입니다.

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

Question 7

이건 어떤가요:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

스 니펫 확장