如何通过 HTML 按钮播放声音

Posted

技术标签:

【中文标题】如何通过 HTML 按钮播放声音【英文标题】：How to play sound through HTML buttons 【发布时间】：2016-08-26 08:13:08 【问题描述】：

我目前通过我的网站播放音乐的方法是使用 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>";

【问题讨论】：

Html 5 audio tag custom controls?的可能重复 【参考方案1】：

您可以通过 onclick 事件播放声音...在 html 上插入一个按钮。编写一个函数并在您的按钮上调用它作为 onclick 事件。

function playMusic()
  var music = new Audio('musicfile.mp3');
  music.play();
  
&lt;input type="button" value="sound" onclick="playMusic()" /&gt;

确保提供有效的文件名。

【讨论】：

【参考方案2】：

这将起作用：

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>

【讨论】：

【参考方案3】：

这样试试

$('#button_play').on('点击', function() $('#button_pause').show(); $('#button_play').hide(); $('音频')[0].play(); ); $('#button_pause').on('点击', function() $('#button_play').show(); $('#button_pause').hide(); $('audio')[0].pause(); );

这里的想法是从返回的数组中获取音频元素并使用 HTML5 标记的方法。你可以从here找到的所有方法

【讨论】：

【参考方案4】：

这行得通。删除我的 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>

【讨论】：

【参考方案5】：

播放和暂停按钮。

信息和代码来自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>

【讨论】：

【参考方案6】：

试试这个：

<!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();
);

【讨论】：

以上是关于如何通过 HTML 按钮播放声音的主要内容，如果未能解决你的问题，请参考以下文章

如何通过按下按钮返回或按钮主页停止播放声音

iPhone - 如何在按钮触摸时播放声音？

如何在 HTML 中的 Image-Click 上播放声音？

没有播放声音

如何使用 html 和 javascript 在网页上自动播放声音

如何在 vb.Net 中通过外部扬声器播放声音？