3

На странице есть несколько тегов аудио и кнопок прикрепленных за ними:

function onplayssoun(snd) {

  $('audio').stop(); //Останавливаем все аудио
  var audio = new Audio(); // Создаём новый элемент Audio
  audio.src = snd; // Указываем путь к звуку "клика"
  audio.autoplay = true; // Автоматически запускаем
  var audio = $('audio')[0];
  $(document).click(function() {
    audio.play();
  });

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio0" src="sound0.mp3"></audio>
<input type="button" value="Play" onclick="onplayssoun('sound0.mp3');">

<audio id="audio1" src="sound1.mp3"></audio>
<input type="button" value="Play" onclick="onplayssoun('sound1.mp3');">

И при воспроизведении второй мелодии по счету - воспроизведенная до этого не останавливается, а продолжает играть, при этом обе мелодии накладываются одна на другую. Мне надо что бы при воспроизведении мелодии если была воспроизведена какая то мелодия до этого она останавливалась. Что я написал тут не так? Помогите пожалуйста

2
  • у тебя уже есть <audio> тег, на кой ты и в функции создаешь новый объект new audio?
    – Air
    Commented 25 янв. 2018 в 8:07
  • @Air то есть надо не создавать объект и без него сразу запускать или удалять каждый раз старый объект? как лучше это сделать? Commented 25 янв. 2018 в 8:23

1 ответ 1

3

Nuralim, тег <audio> в основном можно и надо использовать когда хочешь простой штатный аудио плеер использовать, если визуально штатный плеер на странице не нужен, можно просто создать объект new audio() и запускать звук так, как в данных примерах.

var audio = new Audio(); // Создаём новый элемент Audio
var input = document.getElementsByTagName('input');

for (let i = 0; i < input.length; i++) {
  input[i].addEventListener('click', function() {
    audio.src = this.value;
    audio.play();
    console.log(this.value)
  })

}
<input type="button" value="http://chanson.hostingradio.ru:8041/chanson128.mp3?">
<input type="button" value="http://ic7.101.ru:8000/v3_1?userid=0&setst=qa472mjc0lh95pk1tj8d3319g6&city=0">

Ну вот еще вариант на jquery

var audio = new Audio(); // Создаём новый элемент Audio

$('input').click(function() {
  audio.src = this.name
  audio.play();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Радио Шансон" name="http://chanson.hostingradio.ru:8041/chanson128.mp3?">
<input type="button" value="АвтоРадио" name="http://ic7.101.ru:8000/v3_1?userid=0&setst=qa472mjc0lh95pk1tj8d3319g6&city=0">

5
  • Посмотри, тут пример без JQ на чистом js, ну логику ты точно поймешь, я в JQ не силен и им не пользуюсь, любою чистый js
    – Air
    Commented 25 янв. 2018 в 8:31
  • Ну вот самому стало интересно и сделал пример на JQ))))
    – Air
    Commented 25 янв. 2018 в 8:45
  • Зачем подписываться на каждый инпут, когда можно на всплытие события? И ещё можно дата-атрибуты использовать для адреса.
    – Qwertiy
    Commented 25 янв. 2018 в 8:48
  • @Qwertiy, ну у него было на каждый input, вот по этому и такой пример привел, что было проще человеку понять, а какой ему атрибут использовать думаю сам решит, тем более что у меня в разных примерах по разному реализовано, не мне же за него весь код писать, тем более когда не знаю, что и как там именно он хочет творить...
    – Air
    Commented 25 янв. 2018 в 8:53
  • Везде у тебя одинаково реализовано.
    – Qwertiy
    Commented 25 янв. 2018 в 9:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.