Javascript 如何通过HTML按钮播放声音_Javascript_Jquery_Html_Button_Audio

Javascript 如何通过HTML按钮播放声音

javascript jquery html button audio

Javascript 如何通过HTML按钮播放声音,javascript,jquery,html,button,audio,Javascript,Jquery,Html,Button,Audio,我目前通过我的网站播放音乐的方法是通过HTML音频标签。然而，我希望能够发挥它通过HTML按钮代替。此按钮应能在播放和停止之间切换音乐。我已经在JSFIDLE上创建了一个示例，但不知道如何实现它。有人能用我的JSFIDLE示例演示一下如何做到这一点吗 JSFiddle: 我最初的做法： document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.

我目前通过我的网站播放音乐的方法是通过HTML音频标签。然而，我希望能够发挥它通过HTML按钮代替。此按钮应能在播放和停止之间切换音乐。我已经在JSFIDLE上创建了一个示例，但不知道如何实现它。有人能用我的JSFIDLE示例演示一下如何做到这一点吗

JSFiddle:

我最初的做法：

document.getElementById("soundTag").innerHTML = "<audio controls volume preload='none' src='http://www.sousound.com/music/healing/healing_01.mp3'></audio>";

document.getElementById（“声音标签”）.innerHTML=“”；

像这样试试看

$('#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(); }); $（'按钮'播放'）。在（'单击'，函数（）上）{ $（“#按钮_暂停”）.show（）； $（“#按钮#播放”）.hide（）； $（'audio'）[0]。播放（）； }); $（“#按钮_暂停”）。在（'单击'，函数（）上{ $（“#按钮#播放”）.show（）； $（“#按钮_暂停”）.hide（）； $（'audio'）[0]。暂停（）； }); 这里的想法是从返回的数组中获取音频元素，并使用HTML5标记的方法。您可以在

中找到的所有方法都将起作用：

document.getElementById（“声音标签”）.innerHTML=“”；
$（'按钮'播放'）。在（'单击'，函数（）上）{
//我加了这个
$（“音频”）[0]。播放（）；
$（“#按钮_暂停”）.show（）；
$（“#按钮#播放”）.hide（）；
});
$（“#按钮_暂停”）。在（'单击'，函数（）上{
//我加了这个
$（“音频”）[0]。暂停（）；
$（“#按钮#播放”）.show（）；
$（“#按钮_暂停”）.hide（）；
});
.second{
显示：无；
}

我不想使用音频标记方法，而是想通过按钮来实现。但是我不知道怎么做。


HTML音频标记方法（我不想要的方法）：


按钮方法（我想要的方法，但不起作用）：
您可以通过onclick事件播放声音…在html上插入一个按钮。编写一个函数，并在按钮处将其作为onclick事件调用

函数播放音乐（）{
var music=新音频（'musicfile.mp3'）；
音乐。播放（）；
}
这起作用了。删除我的mp3文件并上传你自己的mp3文件
<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>


歌曲
var aud=document.getElementById（“ASON”）.children[0]；
var显示=假；
aud.pause（）；
函数playPause（）{
如果（显示）{
aud.pause（）；
}否则{
aud.play（）；
}
isPlaying=！isPlaying；
}
播放和暂停按钮
信息和代码来自
我把它放在这个（改变音源）


您的浏览器不支持音频元素。
单击按钮播放或暂停音频
播放音频
暂停音频
var x=document.getElementById（“myAudio”）；
函数playAudio（）{
x、 play（）；
} 
函数pauseAudio（）{
x、 暂停（）；
} 
试试这个：
<!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();
});