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

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>
Ответить с цитированием