Не работает на сайте JS. Очень нужна ваша помощь. - JavaScript, Ajax

Алексей Юрьевич. · 26.07.2019, 17:39

Ребята, всем привет. Я новичок в JS.
Вообщем есть код, который отлично работал в Fiddle (онлайн редактор js)
Но не работал в на сайте.. Не мог понять почему.
Я ковырялся дня 2, по форумам искал ответы.
Потом вдруг он перестал и в редакторе работать.

Суть когда в том, что бы срабатывало однократно аудио
при скролинге до определенного дива с классом "elem"
Вот собственно Html:

Код:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>

<div style="height: 130vh;width: 100%;background: #111;" ></div>
<div style="height: 100px;width: 100%;background: #ccc;" class="elem"></div>
<div style="height: 600px;width: 100%;background: #111;" ></div>
</body>
</html>

Пожалуйста, оформляйте Ваш код согласно правилам.

А это JS:

Код:

var fired = false;
var target = $('.elem');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem && fired === false){
   var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
audio.play();fired = true;
  }
});

Serge_Bliznykov · 26.07.2019, 21:05

подозреваю, что ошибка возникает
Uncaught (in promise) DOMException
см. https://toster.ru/q/551481

попробуйте такой код:

Код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>

<div style="height: 130vh;width: 100%;background: #111;" ></div>
<div style="height: 100px;width: 100%;background: #ccc;" class="elem"></div>
<div style="height: 600px;width: 100%;background: #111;" ></div>
</body>
<script>
window.scrollTo(0, 0); // переместить страницу вверх
var fired = false;
var target = $('.elem');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem && fired === false){
   fired = true;
   var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
     var promise = audio.play();
     if (promise) {
        //Older browsers may not return a promise, according to the MDN website
        promise.catch(function(error) { console.error(error); });
    }
}});
</script>
</html>

Алексей Юрьевич. · 30.07.2019, 17:07

Спасибо БОЛЬШОЕ.♡ Буду изучать!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
ну очень нужна ваша помощь((((((	kinza	Помощь студентам	4	08.06.2009 15:27
мне еще ваша помощь нужна очень	umiko	Помощь студентам	9	22.05.2009 09:57
Очень нужна Ваша помощь!!!	innadans	Microsoft Office Excel	2	17.05.2009 21:07

26.07.2019, 17:39	#1
Алексей Юрьевич. Новичок Джуниор Регистрация: 26.07.2019 Сообщений: 2	Не работает на сайте JS. Очень нужна ваша помощь. Ребята, всем привет. Я новичок в JS. Вообщем есть код, который отлично работал в Fiddle (онлайн редактор js) Но не работал в на сайте.. Не мог понять почему. Я ковырялся дня 2, по форумам искал ответы. Потом вдруг он перестал и в редакторе работать. Суть когда в том, что бы срабатывало однократно аудио при скролинге до определенного дива с классом "elem" Вот собственно Html: Код: `<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> </head> <body> <div style="height: 130vh;width: 100%;background: #111;" ></div> <div style="height: 100px;width: 100%;background: #ccc;" class="elem"></div> <div style="height: 600px;width: 100%;background: #111;" ></div> </body> </html>` Пожалуйста, оформляйте Ваш код согласно правилам. А это JS: Код: `var fired = false; var target = $('.elem'); var targetPos = target.offset().top; var winHeight = $(window).height(); var scrollToElem = targetPos - winHeight; $(window).scroll(function(){ var winScrollTop = $(this).scrollTop(); if(winScrollTop > scrollToElem && fired === false){ var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3'); audio.play();fired = true; } });` Последний раз редактировалось Вадим Мошев; 27.07.2019 в 09:58.

30.07.2019, 17:07	#3
Алексей Юрьевич. Новичок Джуниор Регистрация: 26.07.2019 Сообщений: 2	Спасибо БОЛЬШОЕ.♡ Буду изучать!