javascript - 如何为浏览器音频播放器添加静音/取消静音按钮？

Question

所以我有我的代码，它工作得很好。唯一的问题是没有静音/取消静音按钮，我不知道如何添加它们。

<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>

如果你想现场看 l ook at this site我做了。