단추를 클릭할 때 jQuery를 사용하여 오디오 파일 재생
단추를 클릭할 때 오디오 파일을 재생하려고 하는데 작동하지 않습니다. HTML 코드는 다음과 같습니다.
<html>
<body>
<div id="container">
<button id="play">
Play Music
</button>
</div>
</body>
</html>
내 자바스크립트는:
$('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();
});
});
});
저는 그것을 위한 피들도 만들었습니다.
어떤 접근법?
오디오를 재생할 수 있습니다.<audio>태그 또는<object>또는<embed>느린 로딩(필요할 때 로딩) 소리는 크기가 작으면 가장 좋은 방법입니다.오디오 요소를 동적으로 생성할 수 있습니다. 오디오 요소가 로드되면 다음과 같이 시작할 수 있습니다..play()그리고 그것을 잠시 멈춥니다..pause().
우리가 사용한 것들
사용합니다.canplay파일을 탐지하는 이벤트가 재생될 준비가 되었습니다.
거기에는 없다.stop()오디오 요소에 대한 기능.우리는 그들을 멈출 수밖에 없습니다.그리고 우리가 오디오 파일의 처음부터 시작하고 싶을 때 우리는 그것을 변경합니다..currentTime이 라인을 예제에서 사용합니다.audioElement.currentTime = 0;달성하기 위해.stop()기능 우리는 먼저 파일을 일시 중지한 후 시간을 재설정합니다.
오디오 파일의 길이와 현재 재생 시간을 알고 싶을 수 있습니다.우리는 이미 배웠습니다..currentTime위에서, 우리가 사용하는 길이를 배우기 위해..duration.
예제 가이드
- 문서가 준비되면 동적으로 오디오 요소를 만들었습니다.
- 우리는 재생하고 싶은 오디오로 소스를 설정합니다.
- 파일을 다시 시작하기 위해 'ended' 이벤트를 사용했습니다.
현재 시간이 지속 시간과 같으면 오디오 파일의 재생이 중지됩니다.사용할 때마다
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>$("#myAudioElement")[0].play();
사용할 수 없습니다.$("#myAudioElement").play()당신이 기대하는 것처럼.공식적인 이유는 jQuery에 통합하면 다음을 추가할 수 있기 때문입니다.play()불필요한 오버헤드를 유발하는 모든 요소에 대한 방법.따라서 대신 검색할 DOM 요소 배열에서 위치를 기준으로 참조해야 합니다.$("#myAudioElement")0이라고도 합니다.
다음 인용문은 "feature/wontfix"로 마감된 버그에 대해 제출된 것입니다.
이를 위해 각 DOM 요소 메서드 이름에 대해 jQuery 메서드 이름을 추가해야 합니다.물론 이 방법은 미디어가 아닌 요소에는 아무런 도움이 되지 않기 때문에 추가 바이트를 사용할 가치가 없는 것 같습니다.
다음을 수행하는 다른 사람을 위해, 저는 Ahmet의 대답을 듣고 원래 질문자의 jsfid를 여기에 업데이트하여 다음과 같이 대체했습니다.
audio.mp3
위해서
http://www.uscis.gov/files/nativedocuments/Track%2093.mp3
웹 밖에서 무료로 이용할 수 있는 mp3에 링크합니다.간편한 솔루션을 공유해 주셔서 감사합니다!
다음은 폴백 기능을 갖춘 멋지고 다용도의 솔루션입니다.
<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()"
다음은 어떻습니까?
$('#play').click(function() {
const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
audio.play();
});
jQuery에서 사용하는 내용은 다음과 같습니다.
$('.button').on('click', function () {
var obj = document.createElement('audio');
obj.src = 'linktoyourfile.wav';
obj.play();
});
언급URL : https://stackoverflow.com/questions/8489710/play-an-audio-file-using-jquery-when-a-button-is-clicked
'programing' 카테고리의 다른 글
| iOS Swift에서 원을 그리려면 어떻게 해야 합니까? (0) | 2023.08.15 |
|---|---|
| Java EE에 대한 RESTful 인증 (0) | 2023.08.15 |
| 디스플레이: 인라인 플렉스와 디스플레이: 플렉스의 차이점은 무엇입니까? (0) | 2023.08.15 |
| 스프링 보안 로그인 페이지에서 추가 매개 변수 전달 방법 (0) | 2023.08.15 |
| Vue.js 응용 프로그램에서 Excel 파일을 올바르게 다운로드하는 방법은 무엇입니까? (0) | 2023.08.15 |