1

Всем привет! На сайте играет музыка на фоне, хочу реализовать кнопку выключения/включения звука на странице.Сама музыка реализуется не с помощью , а с помощью JS.Пробовал 2 варианта,не получилось. Первый вариант останавливает проигрывание трека,второй вариант тоже просто останавливает трек.Хотелось бы,чтоб выключался просто звук( типа кнопки "выключить звук" на вкладках в браузерах) Код кнопки,которая есть:

   <div id="play_contain" class="play_contain">
    <div class="play_btn">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Попытка №1:

function createAudioControls() {
var playButton = document.createElement('a');

playButton.setAttribute('id', 'playcontrol');
playButton.textContent = "pause";
document.body.appendChild(playButton);

playButton.addEventListener('click', function(e) {
    e.preventDefault();
    this.textContent = playing ? "play" : "pause";
    toggleAudio();
});
playAudio();
hideLoader();
}
function toggleAudio(){
playing ? pauseAudio() : playAudio();
}
function playAudio() {
playing = true;
startedAt = pausedAt ? Date.now() - pausedAt : Date.now();
asource = null;
asource = actx.createBufferSource();
asource.buffer = audio_buffer;
asource.loop = true;
asource.connect(gainNode);
pausedAt ? asource.start(0, pausedAt / 1000) : asource.start();
animate();
}
function pauseAudio() {
playing = false;
pausedAt = Date.now() - startedAt;
asource.stop();
}

Этот код просто останавливает проигрывание.

Попытка №2:

var mute = document.querySelector('.play_contain'); // mute button

mute.onclick = voiceMute;

function voiceMute() { 
if(mute.id == "play_contain") {
gainNode.gain.value = 0; 
mute.id = "play_contain activated";

} else {
gainNode.gain.value = 1; 
mute.id = "play_contain";
}
}

Можно ли отключить звук на странице другими способами или этими же,но переделанными. с JS-ом дружу на уровне подключения,не больше (

1 ответ 1

0

За это отвечает свойство .muted

var radio = new Audio();
radio.src = "http://icecast.russkoeradio.cdnvideo.ru/rr.mp3";

document.querySelector('#radioPlay').onclick = function() {
  radio.play()
}
document.querySelector('#radioStop').onclick = function() {
  radio.pause()
}
document.querySelector('#muted').onclick = function() {
  if (radio.muted === true) {
    document.querySelector('#muted').innerHTML = 'Отключить звук'
    radio.muted = false;
  } else {
    document.querySelector('#muted').innerHTML = 'Включить звук'
    radio.muted = true;
  }
}
div {
  margin: 10px;
  width: 150px;
  height: 20px;
  background: gray;
  cursor: pointer;
  text-align: center;
}
<div id="radioPlay">Play</div>
<div id="radioStop">Stop</div>
<div id="muted">Отключить звук</div>

4
  • Спасибо,а если трек у меня вызывается вот так?
    – Turniket
    17 янв 2018 в 21:58
  • var media = [ "s3-us-west-2.amazonaws.com/s.cdpn.io/9473/…" ],
    – Turniket
    17 янв 2018 в 21:58
  • по сути,вот на код пене сам скрипт: codepen.io/Turniket/pen/zpmrBp
    – Turniket
    17 янв 2018 в 22:06
  • Не имеет значения, как вызывается трек, свойство .muted просто задаешь объекту Audio...
    – Air
    18 янв 2018 в 5:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.