클릭 이벤트를 통해 mp3를 제어하려고합니다.
<!DOCTYPE html>
<html>
<body>
<audio id="demo" autoplay="true" hidden="hidden">
<source src="Lute.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div onmousedown="WhichButton(event)">
<img src="Birch-Forest.jpg" alt="A birch forest in the fall"
style="width:600px;height:572px">
</div>
<script>
var playing = false;
function WhichButton(event) {
if (event.button == 0) {
document.getElementById('demo').volume-=0.1;
}
else if (event.button == 1 && playing) {
document.getElementById('demo').pause;
}
else if (event.button == 1 && !playing) {
document.getElementById('demo').play;
}
else if (event.button == 2) {
document.getElementById('demo').volume+=0.1;
}
}
</script>
</body>
</html>
이 코드는 이미지를로드하고 오디오 재생을 시작하지만 컨트롤이 작동하지 않습니다. 나는 내가 무엇을하는지 정말로 모른다. 단지 HTML과 JavaScript의 초보자 일 뿐이다.
스크립트에 몇 가지 오류가 있습니다. 보겠습니다.
playing변수를 false 로 초기화 하지만 오디오 플레이어는 자동 재생이 true로 설정되어 있으므로 명확성을 위해 변수를 true 로 초기화 하거나 이름을 pausing으로 변경 해야합니다 . 그러나 이것은 오류가 아닙니다. :)pause하고 play있는 기능 당신이 그들을 호출 싶어 그래서 만약 당신이 사용해야하는 당신의 audioplayer의를 괄호를 다음과 같이 : document.getElementById('demo').pause();. 부사장은 반대 volumeA는 특성 이 괄호를 필요가 없습니다.수정 된 코드 :
<script>
var playing = true; // Point 1
var audioPlayer = document.getElementById('demo');
function WhichButton(event) {
if (event.button == 0 && audioPlayer.volume > 0) {
audioPlayer.volume-=0.1;
}
else if (event.button == 1 && playing) {
audioPlayer.pause(); // Point 2
playing = false; // Point 3
}
else if (event.button == 1 && !playing) {
audioPlayer.play();
playing = true;
}
else if (event.button == 2 && audioPlayer.volume < 1) {
audioPlayer.volume+=0.1;
}
}
</script>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다