如何将 mute/unmute 按钮添加到浏览器音频播放器？

Question

我的代码在这里，而且效果很好。唯一的问题是没有 mute/unmute 按钮，我不知道如何添加它们。

<audio src="MUSIC URL" autoplay loop>
    <p>Your browser does not support the audio element </p>
</audio>

Answer 1

我用这个，得到一个播放和暂停按钮 .png 并使用它们。然后创建一个名为 audio 的文件夹并将文件放在那里供您播放音乐。我把播放和暂停放在一个名为 images 的文件夹中。

<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>

<audio controls loop>
<source src="**your website url here**/audio/waves.ogg" type="audio/ogg">
<source src="**your website url here**/audio/waves.mp3" type="audio/mpeg">
</audio>
<img id="pauseplay" src="**your website url here**/images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
(function(){
 var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
 snd = document.getElementsByTagName('audio')[0],
 ctrl = document.getElementById('pauseplay');
 playing = !playing;
 ctrl.title = playing? 'Pause' : 'Play';
 if(playing){snd.autoplay = false; ctrl.src = '**your website url** here/images/pause.png';}
 ctrl.addEventListener('click', function(){
  if(playing){
   snd.pause();
  } else {
   snd.play();
  }
  playing = !playing;
  ctrl.title = playing? 'Pause' : 'Play';
  ctrl.src = playing? '**your website url here**/images/pause.png' : '**your website url here**/images/play.png';
 }, false);
})();
</script>

如果你想看直播look at this site我做了。

Answer 2

您应该将 controls 属性添加到 audio 标签。

If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback. developer.mozilla

<audio src="http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9" controls>
  <p>Your browser does not support the audio element </p>
</audio>

Answer 3

很简单：

<button onclick="document.getElementsByTagName('audio')[0].play();">Sound on</button>
<button onclick="document.getElementsByTagName('audio')[0].pause();">Sound off</button>
<audio autoplay preload="auto" loop src="your.mp3"></audio>

设置为自动播放和循环播放，点击按钮可以暂停和继续播放。避免播放不合适的浏览器播放器的最佳方法。

如何将 mute/unmute 按钮添加到浏览器音频播放器？

How to add mute/unmute button to browser audio player?

html

javascript

css

audio

audio-player