我现在通过HTML音频标签来播放我的网站上的音乐。然而，我希望能够通过HTML按钮来播放它。这个按钮应该能够切换音乐的播放和停止。我在JSFiddle上创建了一个示例，但不知道如何实现。请问有谁可以使用我的JSFiddle例子来向我展示如何实现呢？
JSFiddle: http://jsfiddle.net/jTh3v/332/
我原来的做法：
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";
您可以通过onclick事件播放声音...在HTML上插入按钮。编写一个函数并在onclick事件中调用它以使其在按钮上运行。
function playMusic(){
var music = new Audio('musicfile.mp3');
music.play();
}<input type="button" value="sound" onclick="playMusic()" /><button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
This will work:
document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";
$('#button_play').on('click', function() {
//I added this
$("audio")[0].play();
$('#button_pause').show();
$('#button_play').hide();
});
$('#button_pause').on('click', function() {
//I added this
$("audio")[0].pause();
$('#button_play').show();
$('#button_pause').hide();
});.second {
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Instead of doing the audio tag method, I want to do it through the buttons. However I don't know how to do this.</p><br>
<p>HTML Audio tag method (the method I don't want):</p>
<div id="soundTag"></div><br>
<p>Button method (the method I want, but doesn't work):</p>
<div>
<button id="button_play" class="first" type="button">
<i class="glyphicon glyphicon-volume-up"></i></button>
<button id="button_pause" class="second" type="button">
<i class="glyphicon glyphicon-volume-off"></i></button>
</div>尝试像这样操作
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});
这里的想法是从返回的数组中获取音频元素并使用HTML5标签的方法。您可以在这里找到所有方法。
播放和暂停按钮。
信息和代码来自https://www.w3schools.com/jsref/met_audio_play.asp
我将其放在http://jsfiddle.net/654qasw0/上（更改声音来源）
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
试试这个：
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="https://upload.wikimedia.org/wikipedia/commons/1/11/H_is_for_horse.ogg" type="audio/ogg">
<source src="http://www.u86news.com/Music/Sounds/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
或者：
<button id="ASong" onClick="playPause()">
<audio
src="file_example_MP3_700KB.mp3"
autoplay
loop
></audio>
Song
</button>
<script>
var aud = document.getElementById("ASong").children[0];
var isPlaying = false;
aud.pause();
function playPause() {
if (isPlaying) {
aud.pause();
} else {
aud.play();
}
isPlaying = !isPlaying;
}
</script>
$('#button_play').on('click', function() {
$('#button_pause').show();
$('#button_play').hide();
$('audio')[0].play();
});
$('#button_pause').on('click', function() {
$('#button_play').show();
$('#button_pause').hide();
$('audio')[0].pause();
});