Есть html код в нем 8 div со своими audio файлами https://jsfiddle.net/Rashit1122233/d975gtn0/16/ HTML: <body> <div class="test"> <p>test-1</p> <audio class="audi" src="mp3/1.mp3"></audio> </div> <div class="test"> <p>test-2</p> <audio class="audi" src="mp3/2.mp3"></audio> </div> <div class="test"> <p>test-3</p> <audio class="audi" src="mp3/3.mp3"></audio> </div> <div class="test"> <p>test-4</p> <audio class="audi" src="mp3/4.mp3"></audio> </div> <div class="test"> <p>test-5</p> <audio class="audi" src="mp3/5.mp3"></audio> </div> <div class="test"> <p>test-6</p> <audio class="audi" src="mp3/6.mp3"></audio> </div> <div class="test"> <p>test-7</p> <audio class="audi" src="mp3/7.mp3"></audio> </div> <div class="test"> <p>test-8</p> <audio class="audi" src="mp3/8.mp3"></audio> </div> </body> как сделать так чтоб по нажатию на этот блок играл свой аудио файл в этом блоке, по нажатию на след играла своя мелодия в своем блоке? Код (Text): $('.test').click(function() { $(this).css({ 'background': '#fff000' }); }); сделал по нажатию чтоб блок менял свет, а как мелодию сделать не понимаю, добавляю этот код Код (Text): $("audiо")[0].play(); играет самая первая мелодия из первого блока, и нажимаю на остальные также играет мелодия первого блока во всех остальных блоках.
потому что ты всегда ссылаешься на первый тег audio. ты же через this менял css тому блоку на который нажали, так же поступай и с запуском audio. почитай что такое this в javascript.
спасибо за наводку, проблема возникает следующая, делаю я приложение крос-платформенное для своего будущего сайта заранее, на коде КОРДОВА через Intel xdk в браузере все работает идеально, а на телефоне андроид не так, проигрывается 30 файлов аудио, а потом перестает, проблема в буферации или в кеше?
HTML: <!DOCTYPE html> <html> <head> <title>Blank App Designer Packaged Web App Project Template</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> --> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> --> <style> /* following three (cascaded) are equivalent to above three meta viewport statements */ /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */ /* see http://dev.w3.org/csswg/css-device-adapt/ */ @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; } @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; } /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/ </style> <link rel="stylesheet" href="css/app.css"> <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! --> <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below --> <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> --> <!-- Recommended location for your JavaScript libraries --> <!-- These library references (below) are just examples to give you the general idea... --> <!-- <script src="lib/mc/hammer.js"></script> --> <!-- <script src="lib/ft/fastclick.js"></script> --> <!-- * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app" * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script? * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project. * You can safely ignore the error or comment out this line if you will not be developing a Cordova app. --> <script src="cordova.js" id="xdkJScordova_"></script> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/app.js"></script> <!-- for your event code, see README and file comments for details --> <script src="js/init-app.js"></script> <!-- for your init code, see README and file comments for details --> <script src="xdk/init-dev.js"></script> <!-- normalizes device and document ready events, see file for details --> </head> <body> <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> <div class="test"> <p>test-1</p> <audio class="audi" src="mp3/animals001.mp3"></audio> </div> <div class="test"> <p>test-2</p> <audio class="audi" src="mp3/animals002.mp3"></audio> </div> <div class="test"> <p>test-3</p> <audio class="audi" src="mp3/animals003.mp3"></audio> </div> <div class="test"> <p>test-4</p> <audio class="audi" src="mp3/animals004.mp3"></audio> </div> <div class="test"> <p>test-5</p> <audio class="audi" src="mp3/animals005.mp3"></audio> </div> <div class="test"> <p>test-6</p> <audio class="audi" src="mp3/animals006.mp3"></audio> </div> <div class="test"> <p>test-7</p> <audio class="audi" src="mp3/animals007.mp3"></audio> </div> <div class="test"> <p>test-8</p> <audio class="audi" src="mp3/animals008.mp3"></audio> </div> <div class="test"> <p>test-9</p> <audio class="audi" src="mp3/animals009.mp3"></audio> </div> <div class="test"> <p>test-10</p> <audio class="audi" src="mp3/animals010.mp3"></audio> </div> <div class="test"> <p>test-11</p> <audio class="audi" src="mp3/animals011.mp3"></audio> </div> <div class="test"> <p>test-12</p> <audio class="audi" src="mp3/animals012.mp3"></audio> </div> <div class="test"> <p>test-13</p> <audio class="audi" src="mp3/animals013.mp3"></audio> </div> <div class="test"> <p>test-14</p> <audio class="audi" src="mp3/animals014.mp3"></audio> </div> <div class="test"> <p>test-15</p> <audio class="audi" src="mp3/animals015.mp3"></audio> </div> <div class="test"> <p>test-16</p> <audio class="audi" src="mp3/animals016.mp3"></audio> </div> <div class="test"> <p>test-17</p> <audio class="audi" src="mp3/animals017.mp3"></audio> </div> <div class="test"> <p>test-18</p> <audio class="audi" src="mp3/animals018.mp3"></audio> </div> <div class="test"> <p>test-19</p> <audio class="audi" src="mp3/animals019.mp3"></audio> </div> <div class="test"> <p>test-20</p> <audio class="audi" src="mp3/animals020.mp3"></audio> </div> <div class="test"> <p>test-21</p> <audio class="audi" src="mp3/animals021.mp3"></audio> </div> <div class="test"> <p>test-22</p> <audio class="audi" src="mp3/animals022.mp3"></audio> </div> <div class="test"> <p>test-23</p> <audio class="audi" src="mp3/animals023.mp3"></audio> </div> <div class="test"> <p>test-24</p> <audio class="audi" src="mp3/animals024.mp3"></audio> </div> <div class="test"> <p>test-25</p> <audio class="audi" src="mp3/animals025.mp3"></audio> </div> <div class="test"> <p>test-26</p> <audio class="audi" src="mp3/animals026.mp3"></audio> </div> <div class="test"> <p>test-27</p> <audio class="audi" src="mp3/animals027.mp3"></audio> </div> <div class="test"> <p>test-28</p> <audio class="audi" src="mp3/animals028.mp3"></audio> </div> <div class="test"> <p>test-29</p> <audio class="audi" src="mp3/animals029.mp3"></audio> </div> <div class="test"> <p>test-30</p> <audio class="audi" src="mp3/animals030.mp3"></audio> </div> <div class="test"> <p>test-31</p> <audio class="audi" src="mp3/animals031.mp3"></audio> </div> <div class="test"> <p>test-32</p> <audio class="audi" src="mp3/animals032.mp3"></audio> </div> <div class="test"> <p>test-33</p> <audio class="audi" src="mp3/animals033.mp3"></audio> </div> <div class="test"> <p>test-34</p> <audio class="audi" src="mp3/animals034.mp3"></audio> </div> <div class="test"> <p>test-35</p> <audio class="audi" src="mp3/animals035.mp3"></audio> </div> <div class="test"> <p>test-36</p> <audio class="audi" src="mp3/animals036.mp3"></audio> </div> <div class="test"> <p>test-37</p> <audio class="audi" src="mp3/animals037.mp3"></audio> </div> <div class="test"> <p>test-38</p> <audio class="audi" src="mp3/animals038.mp3"></audio> </div> <div class="test"> <p>test-39</p> <audio class="audi" src="mp3/animals039.mp3"></audio> </div> <div class="test"> <p>test-40</p> <audio class="audi" src="mp3/animals040.mp3"></audio> </div> </body> </html> код jquery Код (Javascript): $(document).ready(function(){ alert('fug'); $('.test').click(function(){ //$(this).css({'background' : '#fff000'}); $(this).children('audio')[0].play(); $('.test').css('background', '#000'); $(this).css({'background': '#fff000'}); console.log( "нажата кнопка!"); }); }); приложение на intel xdk код cordova, в консоли пишет что кнопки нажимается, а воспроизводит 33 файла а потом просто перестает, хотя воспроизводится не зависимо от начала или от конца, в чем проблема я не понимаю, в браузере все работает идеально, упаковал под андроид, тестировал на несколько реальных устройств, асус зенфон 550, самсунг нот 3 и тп, и у всех одно и тоже. в чем может быть проблема?
спасибо час попробую, тока вот не совсем понимаю как нему Код (Text): $(this).children('audio') консоль прописать и чтоб отображал id этого элемента?
выводи в консоль --- Добавлено --- можно и alert делать, чтобы на телефоне проверить если там не настроена отладка
Код (Text): function mir(){ console.log( "Игрaет аудио!"); } $('.test').click(function(){ $(this).children('audio',mir)[0].play(); не работает, что то я совсем туплю где тут ошибка?
посмотри документацию по children --- Добавлено --- разве она принимает два аргумента? и где id из this выводиться?
все голова кругом, погуглил нашел вот это Код (Text): console.log($(this).children('audio')[0].play()); но в программе выводит undefined, да же на том 33 элементе, а в браузере все работает и выводит вот так твой вариант как реализовать даже не знаю.
код html HTML: <div class="test"> <p>test-1</p> <audio class="audi" id="t-1" src="mp3/animals001.mp3"></audio> </div> таких 40 для теста погуглив нашел и выполнил вот так Код (Text): $('.test').click(function(){ $(this).children('audio').each(function(index,Element){ console.log('id:', $(Element).attr('id')); $(this)[0].play(); }); $('.test').css('background', '#000'); $(this).css({'background': '#fff000'}); console.log( "нажата кнопка!"); }); выводит id нажимается на все 40 элементов и выводит у всех 40 атрибутов id, не играет так же 33 файл МР3 вот фото консоли как дальше быть?
Думаю проблема в each. Этот код на мобильном будет выдавать атрибут src только того audio тега по которому нажали? Код (Javascript): $('.test').click(function(){ alert($(this).children('audio').attr('src')); //console.log($(this).children('audio').attr('src')); });
добавил этот код и дало такие результаты: 1 - по нажатию на 32 элемент звук начинает играть после нажатия на ОК, и загорается желтым 32 второй элемент. 2 - по нажатию на 33 элемент выходит также алерт с МР3 файлом, после нажатия на ОК звук не играет, а 33 элемент загорается желтым как дальше быть? может мне в архив запаковать и выложить на гугл-драйв, + приложение андроид.арк?
да останавливаю звук после нажатия на следующий, вот код который в самой программе выводит: что нажато, id нажатого, путь файла , так и в консоле и с алертом выводит. Код (Text): $('.test').click(function() { var index =$('.test audio').index($(this).find('audio')); if (!$(this).find('audio')[0]||$(this).find('audio')[0].readyState===0) { alert('no audio source') } else { $(this).find('audio')[0].load(); $(this).find('audio')[0].play(); $('.test audio').each(function(){ if(!this.paused && $('.test audio').index(this)!=index){ this.pause(); this.currentTime = 0; }else if(!this.paused && $('.test audio').index(this)==index){ $('#block').text('Нажат блок: '+$(this).prev().text()+'; играет аудио id: '+$(this).attr('id')+'; путь аудио: '+$(this).attr('src')); console.log('Нажат блок: '+$(this).prev().text()+'; играет аудио id: '+$(this).attr('id')+'; путь аудио: '+$(this).attr('src')); alert('Нажат блок: '+$(this).prev().text()+'; играет аудио id: '+$(this).attr('id')+'; путь аудио: '+$(this).attr('src')); } }); $('.test').css('background', '#000'); $(this).css({ 'background': '#fff000' }); } }); фото что выводит на телефоне и в консоли вот сам архив интеловский, все содержимое находится в папке www, в браузере все работает идеально. https://drive.google.com/file/d/0B-o5bnTzM0H3WWVldnVFTUJzZUE/view?usp=sharing а вот сам арк файл андроидовский, который мне мозг выносит вот уже 5-тый день, у него и проблема. https://drive.google.com/file/d/0B-o5bnTzM0H3UHlTWXRPejBzM0U/view?usp=sharing проверял только на реальных устройствах, на своем родном интеловском эмуляторе вообще звуков не воспроизводит.
надо перепроверить каждую строчку кода, это долго и нудно, по идее это нужно было делать при написании, советую всё стереть и начать с нуля, по ходу написания и усложнения программы, перепроверять каждый шаг
это тестовая программа, я его и начал с нуля, тут участвуют три файла, index.html, app.css, app.js весь код который выкладывал тут, тоже самое и там.