audio 제어, 컨트롤
페이지 정보
작성자 관리자 작성일 20-09-18 09:40 조회 5,412 댓글 0본문
<style>
button#playbtn{
background: url('./png/play.png') no-repeat;
width: 30px;
height: 30px;
border: 0px;
}
button#mutebtn{
background: url('./png/speaker.png') no-repeat;
width: 30px;
height: 30px;
border: 0px;
}
</style>
<script>
function Audio_play() {
var myAudio = document.getElementById("myAudio");
if (myAudio.paused) {
myAudio.play();
playbtn.style.background = "url('./png/pause.png') no-repeat";
} else {
myAudio.pause();
playbtn.style.background = "url('./png/play.png') no-repeat";
}
}
function Audio_mute() {
var myAudio = document.getElementById("myAudio");
if(myAudio.muted){
myAudio.muted = false;
mutebtn.style.background = "url('./png/speaker.png') no-repeat";
} else {
myAudio.muted = true;
mutebtn.style.background = "url('./png/speaker_muted.png') no-repeat";
}
}
</script>
<!--
//src, controls, loop, autoplay, muted, preload(auto, metadata, none)
//mp3: audio/mpeg
//ogg: audio/ogg
//wav: audio/wav
-->
<audio id="myAudio" controls="controls">
<source src="m.mp3" type="audio/mpeg">
</audio>
<br>
<button id="playbtn" onclick="Audio_play()"></button>
<button id="mutebtn" onclick="Audio_mute()"></button>
button#playbtn{
background: url('./png/play.png') no-repeat;
width: 30px;
height: 30px;
border: 0px;
}
button#mutebtn{
background: url('./png/speaker.png') no-repeat;
width: 30px;
height: 30px;
border: 0px;
}
</style>
<script>
function Audio_play() {
var myAudio = document.getElementById("myAudio");
if (myAudio.paused) {
myAudio.play();
playbtn.style.background = "url('./png/pause.png') no-repeat";
} else {
myAudio.pause();
playbtn.style.background = "url('./png/play.png') no-repeat";
}
}
function Audio_mute() {
var myAudio = document.getElementById("myAudio");
if(myAudio.muted){
myAudio.muted = false;
mutebtn.style.background = "url('./png/speaker.png') no-repeat";
} else {
myAudio.muted = true;
mutebtn.style.background = "url('./png/speaker_muted.png') no-repeat";
}
}
</script>
<!--
//src, controls, loop, autoplay, muted, preload(auto, metadata, none)
//mp3: audio/mpeg
//ogg: audio/ogg
//wav: audio/wav
-->
<audio id="myAudio" controls="controls">
<source src="m.mp3" type="audio/mpeg">
</audio>
<br>
<button id="playbtn" onclick="Audio_play()"></button>
<button id="mutebtn" onclick="Audio_mute()"></button>
댓글목록 0
등록된 댓글이 없습니다.