Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2017, 23:34
Новичок на форуме
Отправить личное сообщение для mister_ex Посмотреть профиль Найти все сообщения от mister_ex
 
Регистрация: 15.12.2016
Сообщений: 6

клик по блокам и воспроизведение в них аудио файлов!!
Друзья прошу помощи,я новичок сильно не ругайте!!
Есть на странице блоки, в каждом из них свой текст и свой аудио файл. клик по каждому из них воспроизводит свой вложенный аудио файл, проблема следующая!!
Как остановить звук у предыдущего элемента или вообще на странице при клике на другой элемент?
А так этот код JS работает идеально!!!

есть след методы lacal.stop(); local.pause();

Код на JSFiddle для удобства редактирования!!!
https://jsfiddle.net/Rashit1122233/bLk6h5to/2/

HTML код.


<div  class="audio">
       <p>Звук-1</p>
       <audio src="1.mp3" type="audio/mpeg"></audio>
</div>
<div  class="audio">
      <p>Звук-2</p>
      <audio src="2.mp3" type="audio/mpeg"></audio>
</div>
<div  class="audio">
      <p>Звук-3</p>
      <audio src="3.mp3" type="audio/mpeg"></audio>
</div>


Код JS
var blocks = document.querySelectorAll('.audio');
       for(var i = 0; i < blocks.length; i++) {
            var block = blocks[i];
            var audioPlaying = false;
            block.onclick = function() {

               var path = '/android_asset/www/audio/';
               var audioName =this.querySelector('audio1').getAttribute('src');
               var fullPath = path+audioName;
               var local1 = new Media(fullPath);
               local1.play();

                              
            }

        }

Последний раз редактировалось mister_ex, 22.01.2017 в 23:50. Причина: добавлена внешняя ссылка
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2017, 10:39
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

mister_ex,
Объявите глобальную переменную (вне обработчика onclick), запоминайте в ней запущенный элемент, при очередном запуске останавливайте.
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2017, 13:53
Новичок на форуме
Отправить личное сообщение для mister_ex Посмотреть профиль Найти все сообщения от mister_ex
 
Регистрация: 15.12.2016
Сообщений: 6

Сообщение от Dilettante_Pro Посмотреть сообщение
mister_ex,
Объявите глобальную переменную (вне обработчика onclick), запоминайте в ней запущенный элемент, при очередном запуске останавливайте.
Объявил я глобальную переменную но она так не работает, но как запомнить в ней запущенный элемент? и потом нужна ли проверка в функции? например если запущена мелодия делать то, иначе сделать это?

var blocks = document.querySelectorAll('.audio');
  for(var i = 0; i < blocks.length; i++) {
       var block = blocks[i];

       var path = '/android_asset/www/audio/';
       var audioName = this.querySelector('audio').getAttribute('src');
       var fullPath = path+audioName;
       var local1 = new Media(fullPath);

       block.onclick = function() {
                              
            local1.play();

                              
       }

}

Последний раз редактировалось mister_ex, 23.01.2017 в 16:20.
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2017, 14:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

mister_ex,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .audio{
    display:block;
    text-align:center;
    margin:10px 10px;
    width: 100px;
    height: 100px;
    background: #444;
    color: #fff;
    font-weight: bold;
    float:left;
    cursor:pointer;
}
p{
  line-height: 50px;
}
  </style>



</head>

<body>
<div class="audio">
  <p>Звук-1!</p>
  <audio src="4824354" type="audio/mpeg"></audio>
</div>
<div class="audio">
  <p>Звук-2!</p>
  <audio src="3860794" type="audio/mpeg"></audio>
</div>
<div class="audio">
  <p>Звук-3!</p>
  <audio src="2962900" type="audio/mpeg"></audio>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var audio = new Audio() ;
[].forEach.call(document.querySelectorAll('.audio'), function(item) {
        item.addEventListener('click', function() {
        var path = 'http://zf.fm/download/';
        var audioName = item.querySelector('audio').getAttribute('src');
        audio.pause();
        var fullPath = path+audioName;
        audio.src = fullPath;
        audio.play();
        });
    });
});
</script>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2017, 16:14
Новичок на форуме
Отправить личное сообщение для mister_ex Посмотреть профиль Найти все сообщения от mister_ex
 
Регистрация: 15.12.2016
Сообщений: 6

рони,
Спасибо то что нужно, тока есть одно но!! делаю приложение на кордова под андроид и если встроить твой код туда то он не работает!! как встроить его сюда? вот полный код JS
var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
         this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {

          function local(){
            //вот так эта зараза работает!!
             var blocks = document.querySelectorAll('.audio');
                    for(var i = 0; i < blocks.length; i++) {
                        var block = blocks[i];

                        block.onclick = function() {
                                 var path = '/android_asset/www/audio/';
                                 var audioName =this.querySelector('audio').getAttribute('src');
                                 var fullPath = path+audioName;
                                 var local1 = new Media(fullPath);
                                 local1.play();
                                 //this.style.backgroundColor = 'red';
                                // this.style.color = 'black';

                        }//конец функции
                    }//конец цикла

         }
         local();

    }
};

app.initialize();
Ответить с цитированием
  #6 (permalink)  
Старый 23.01.2017, 16:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

mister_ex,
Сообщение от Dilettante_Pro
Объявите глобальную переменную (вне обработчика onclick),
var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
         this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
var audio = new Media();

          function local(){
            //вот так эта зараза работает!!
             var blocks = document.querySelectorAll('.audio');
                    for(var i = 0; i < blocks.length; i++) {
                        var block = blocks[i];

                        block.onclick = function() {
                                 var path = '/android_asset/www/audio/';
                                 var audioName =this.querySelector('audio').getAttribute('src');
                                 var fullPath = path+audioName;
audio.pause();

audio.src=fullPath;
                                                                  audio.play();
                                 //this.style.backgroundColor = 'red';
                                // this.style.color = 'black';

                        }//конец функции
                    }//конец цикла

         }
         local();

    }
};

app.initialize();
Ответить с цитированием
  #7 (permalink)  
Старый 23.01.2017, 16:44
Новичок на форуме
Отправить личное сообщение для mister_ex Посмотреть профиль Найти все сообщения от mister_ex
 
Регистрация: 15.12.2016
Сообщений: 6

рони,
так я пробывал, она не работает так

var blocks = document.querySelectorAll('.audio');
        for(var i = 0; i < blocks.length; i++) {
            var block = blocks[i];
            
            
            
            var path = '/android_asset/www/audio/';
            var audioName =this.querySelector('audio').getAttribute('src');
            var fullPath = path+audioName;
             var local1 = new Media(fullPath);
             
             
            block.onclick = function() {
                //действие при клике
                     
                     local1.play();
                     //this.style.backgroundColor = 'red';
                    // this.style.color = 'black';
               
            }//конец функции
        }//конец цикла
Ответить с цитированием
  #8 (permalink)  
Старый 23.01.2017, 17:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

mister_ex,
других вариантов не вижу.
Ответить с цитированием
  #9 (permalink)  
Старый 23.01.2017, 17:36
Новичок на форуме
Отправить личное сообщение для mister_ex Посмотреть профиль Найти все сообщения от mister_ex
 
Регистрация: 15.12.2016
Сообщений: 6

рони,
попробую как то твою и эту совместить)) может и получится что нибудь. а так спасибо за советы всем)
Ответить с цитированием
  #10 (permalink)  
Старый 23.01.2017, 21:17
Новичок на форуме
Отправить личное сообщение для mister_ex Посмотреть профиль Найти все сообщения от mister_ex
 
Регистрация: 15.12.2016
Сообщений: 6

рони,
спасибо тебе огромное, решил свою проблему, просто нужно было убрать пару строк из твоего кода, вот рабочая функция. как сюда добавить чтоб по клику менялся свет фона, а у предыдущего возвращался обратно?
сылка для редактирования! https://jsfiddle.net/Rashit1122233/ud343cpe/4/

var audio = new Audio() ;
[].forEach.call(document.querySelectorAll('.audio'), function(item) {
        item.addEventListener('click', function() {
        var path = '/android_asset/www/audio/';
        var audioName = item.querySelector('audio').getAttribute('src');
        audio.pause();
        var fullPath = path+audioName;
        audio.src = fullPath;
        audio.play();
        });

    });

Последний раз редактировалось mister_ex, 23.01.2017 в 21:23.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Воспроизведение аудио yumakar Events/DOM/Window 8 29.10.2019 13:53
Подключение и запуск Аудио файлов YURGEN Элементы интерфейса 7 22.01.2017 17:41
Воспроизведение аудио MaksZua Общие вопросы Javascript 1 04.11.2015 22:23