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>

如果你想看到它ook at this site我活着。

Answer 2

您应该将controls属性添加到audio代码。

如果存在此属性，浏览器将提供控件以允许用户控制音频播放，包括音量，搜索和暂停/恢复播放。 developer.mozilla

＆＃13;

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

＆＃13;

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>

在自动播放和循环中设置，您可以通过单击按钮暂停和恢复。避免diplaying不适合的浏览器播放器的最佳方法。

如何在浏览器音频播放器中添加静音/取消静音按钮？

3 个答案: