Cannot read property 'play' of undefined JQuery

188

03 сентября 2018, 23:00

Пытаюсь сделай простейший драм. Хотел, чтобы при клики на класс button запускался звук.

В чем ошибка)?

Код:

$(function(){ 
  $('.button').mousedown(function(event) { 
  var audio = $('audio').autoplay; 
  audio.play(); 
}); 
$('.button').mouseup(function(event) { 
  var audio = $('audio').autoplay; 
  audio.stop(); 
    }); 
})

.piano{ 
display: flex; 
width:100%; 
} 
 
.button{ 
width: 40px; 
height: 40px; 
background-color: red; 
margin-left: 20px;  
}

<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<div class="piano"> 
    <div class="button"></div> 
    <div class="button"></div> 
    <div class="button"></div> 
 
</div> 
 
<audio src="Sound_18050.mp3"></audio>

Ошибка при нажатии на .button

Answer 1

Нужно понимать, что этим кодом: $('audio'), вы создаёте jquery объект. И у него нет свойства "autoplay". Поэтому пытаясь вызвать метод .play() на несуществующем свойстве вы получаете эту ошибку. То, что вы пытаетесь сделать, скорее всего, нуждается в таком коде:

$(function(){
$('.button').mousedown(function(event) {
    $('audio')[0].play();
});
$('.button').mouseup(function(event) {
    $('audio')[0].stop();
});
})

Answer 2

Использовать обращение - audio[0] (получает первый элемент)
Метода stop() нет, стоит заменить на audio[0].pause(); audio[0].currentTime = 0;

$('.button').mousedown(function() { 
    var audio = $('audio'); 
    audio[0].play(); 
}); 
 
$('.button').mouseup(function() { 
    var audio = $('audio'); 
     
  audio[0].pause(); 
  audio[0].currentTime = 0;   
});

.piano{ 
  display: flex; 
  width:100%; 
} 
 
.button{ 
  width: 40px; 
  height: 40px; 
  background-color: red; 
  margin-left: 20px;  
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
   
<div class="piano"> 
    <div class="button"></div> 
    <div class="button"></div> 
    <div class="button"></div> 
 
</div> 
 
<audio id="myAudio" src="https://stopmusic.net/_ld/57/5776_Axwell_Ingrosso.mp3"></audio>

Рабочий пример на jsbin

Answer 3

Хотел, чтобы при клики на класс button запускался звук. В чем ошибка)?

Надо обращатся, к первму элементу аудио.

$(document).ready(function() { 
  var audio = $('audio') 
  $('.play').click(function(event) { 
    audio[0].play(); 
  }); 
  $('.pause').click(function() { // Pause 
    audio[0].pause(); 
  }) 
  $('.stop').click(function(event) {// Stop 
    audio[0].pause(); 
    audio[0].currentTime = 0; 
  }); 
 
})

.piano { 
  display: flex; 
  width: 100%; 
} 
 
.button { 
  width: 40px; 
  height: 40px; 
  background-color: red; 
  margin-left: 20px; 
} 
 
.button i { 
  display: inline-block; 
  font-size: 40px; 
  line-height: 50px; 
  background-color: black; 
  color: white; 
  width: 50px; 
  height: 50px; 
  text-align: center; 
  vertical-align: bottom; 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 
 
 
<div class="piano"> 
  <div class="button play" title='play'> 
    <i class="fas fa-play"></i> 
  </div> 
  <div class="button pause" title='pause'> 
  <i class="fas fa-pause"></i> 
  </div> 
  <div class="button stop" title='stop'> 
  <i class="fas fa-stop"></i> 
  </div> 
 
</div> 
 
<audio src="https://archive.org/download/testmp3testfile/mpthreetest.mp3"></audio>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Верстка макетов

Вопрос по верстке макетовЧасто , скорее всего из за неопытности, при верстке по макетам приходится подбирать маргины, паддинги, различные...

199

HTML

Как получить содержимое таблицы с html

Имеется сайт с таблицей, аналогичный такому https://wwwparimatch

186

HTML

Помогите настроить columns или подобрать альтернативу

помогите, пожалуйста, не могу решить такую проблему: У меня есть ul список в который динамически записуються li, нужно что бы создавались колонки...

188

HTML

React js. create-react-app. Как создать несколько страниц?

Не понимаю, как добавить вторую страничку в реакт приложение, созданное react-create-appНа данный момент в проекте есть node_modules папка, src с файлами

177