Форум

mister_ex · #1 (**permalink**) 22.01.2017, 23:34

Друзья прошу помощи,я новичок сильно не ругайте!!
Есть на странице блоки, в каждом из них свой текст и свой аудио файл. клик по каждому из них воспроизводит свой вложенный аудио файл, проблема следующая!!
Как остановить звук у предыдущего элемента или вообще на странице при клике на другой элемент?
А так этот код 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();

                              
            }

        }

Dilettante_Pro · #2 (**permalink**) 23.01.2017, 10:39

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

mister_ex · #3 (**permalink**) 23.01.2017, 13:53

Сообщение от 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();

                              
       }

}

рони · #4 (**permalink**) 23.01.2017, 14:51

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>

mister_ex · #5 (**permalink**) 23.01.2017, 16:14

рони,
Спасибо то что нужно, тока есть одно но!! делаю приложение на кордова под андроид и если встроить твой код туда то он не работает!! как встроить его сюда? вот полный код 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

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();

mister_ex · #7 (**permalink**) 23.01.2017, 16:44

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

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

mister_ex,
других вариантов не вижу.

mister_ex · #9 (**permalink**) 23.01.2017, 17:36

рони,
попробую как то твою и эту совместить)) может и получится что нибудь. а так спасибо за советы всем)

mister_ex · #10 (**permalink**) 23.01.2017, 21:17

рони,
спасибо тебе огромное, решил свою проблему, просто нужно было убрать пару строк из твоего кода, вот рабочая функция. как сюда добавить чтоб по клику менялся свет фона, а у предыдущего возвращался обратно?
сылка для редактирования! 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();
        });

    });

Форум

Справочник

Discord чат

Курсы javascript