клик по блокам и воспроизведение в них аудио файлов!!
Друзья прошу помощи,я новичок сильно не ругайте!!
Есть на странице блоки, в каждом из них свой текст и свой аудио файл. клик по каждому из них воспроизводит свой вложенный аудио файл, проблема следующая!! Как остановить звук у предыдущего элемента или вообще на странице при клике на другой элемент? А так этот код 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,
Объявите глобальную переменную (вне обработчика 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,
<!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>
|
рони,
Спасибо то что нужно, тока есть одно но!! делаю приложение на кордова под андроид и если встроить твой код туда то он не работает!! как встроить его сюда? вот полный код 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();
|
mister_ex,
Цитата:
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();
|
рони,
так я пробывал, она не работает так
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';
}//конец функции
}//конец цикла
|
mister_ex,
других вариантов не вижу. |
рони,
попробую как то твою и эту совместить)) может и получится что нибудь. а так спасибо за советы всем) |
рони,
спасибо тебе огромное, решил свою проблему, просто нужно было убрать пару строк из твоего кода, вот рабочая функция. как сюда добавить чтоб по клику менялся свет фона, а у предыдущего возвращался обратно? сылка для редактирования! 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();
});
});
|
| Часовой пояс GMT +3, время: 09:24. |