Как добавить кнопку отключения звука / включения в аудиоплеер браузера?

#javascript #html #css #audio #audio-player

#javascript #HTML #css #Аудио #аудиоплеер

Вопрос:

Итак, у меня есть свой код здесь, и он отлично работает. Единственное, что нет кнопок отключения / включения звука, и я понятия не имею, как их добавить.

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

Ответ №1:

Я использую это, получаю play и pause button .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 amp;amp; !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch amp;amp; 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>

Если вы хотите увидеть это вживую, загляните на этот сайт, который я создал.

1. приветствую вас, у меня есть float: right; для изображений, потому что именно там я их и хотел, но вы можете это изменить

2. Как включить автозапуск? Я изменил {snd.autoplay = false; на true, но без кубиков..

3. если (воспроизведение) {snd.autoplay = true;

4. Я сделал это, но это не работает, даже когда он говорит true, это то же самое, как если бы оно было false..

5. Вау, посмотри на мой HamptonSunrise.com снова посетите веб-сайт, просмотрите источник и убедитесь, что у вас есть свой такой же способ

Ответ №2:

Вы должны добавить controls атрибут в audio тег.

Если этот атрибут присутствует, браузер предложит элементы управления, позволяющие пользователю управлять воспроизведением звука, включая громкость, поиск и приостановку / возобновление воспроизведения. разработчик.mozilla

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

Ответ №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>

Он установлен на автозапуск и цикл, вы можете приостанавливать и возобновлять, нажимая кнопки. Лучший способ избежать дублирования неподходящего проигрывателя браузера.