• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JS - odtwarzanie mp3 jeden po drugim

+2 głosów
73 wizyt
pytanie zadane 5 października w JavaScript przez mikey Użytkownik (760 p.)
Cześć,

mam tablicę z linkami każdy mp3, jak odtworzyć je jeden po drugim po kliknięciu przycisku?

 

Dzięki :)

2 odpowiedzi

0 głosów
odpowiedź 5 października przez qax Mądrala (6,510 p.)

Na przykład tak:

<audio id="audio-element"></audio>
<button type="button" id="button-element">Graj</button>
<br />
<span id="span-element"></span>
var audioElement = document.getElementById('audio-element');
var buttonElement = document.getElementById('button-element');
var spanElement = document.getElementById('span-element');
var id = 0;
var tablica = ['https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3', 'https://filesamples.com/samples/audio/mp3/sample3.mp3', 'https://filesamples.com/samples/audio/mp3/sample1.mp3']

buttonElement.addEventListener('click', function() {
	spanElement.innerText = 'Odtwarzanie pliku nr ' + (id + 1) + ' o URL ' + tablica[0];
	audioElement.src = tablica[0];
  audioElement.play();
});

audioElement.addEventListener('ended', function() {
	if(id < tablica.length - 1) {
    id++;
    spanElement.innerText = 'Odtwarzanie pliku nr ' + (id + 1) + ' o URL ' + tablica[id];
    audioElement.src = tablica[id];
    audioElement.play();
  } else {
  	spanElement.innerText = 'Ukończono odtarzanie plików'
  }
});

 

komentarz 5 października przez mikey Użytkownik (760 p.)
a jeszcze jakaś rada jak to przerobić na Vue.js?
1
komentarz 6 października przez qax Mądrala (6,510 p.)

Nie znam się jak narazie na Vue.js i nie wiem czy kiedykolwiek w przyszłości będę go używał. Aktualnie uczę się Reacta, bo to jest wiodąca biblioteka JS, więc w nim bardziej coś bym Ci pomógł. smiley

1
komentarz 6 października przez qax Mądrala (6,510 p.)

A tak przy okazji zapraszam na mój blog: http://www.wlasocha.pl/portfolio/audio-web-player - wczoraj wydałem drugą poprawioną wersję odtwarzacza mp3 wink

0 głosów
odpowiedź 5 października przez VBService VIP (138,250 p.)
edycja 5 października przez VBService

Chodzi o zdarzenie ended elementu audio ( <audio> )

ended (Web Audio Event)

 

The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.

 

Przykład

<button id="button-play" class="button-play" disabled><span>‣</span></button>
.button-play span {
  display: block;
  transform: scale(2.5);
}
const play_list = [
  { 'name':'Radio Tune',       'url':'Radio%20Tune-SoundBible.com-1525681700.mp3' },
  { 'name':'Car Alarm',        'url':'Car%20Alarm-SoundBible.com-2096911689.mp3' },
  { 'name':'Train',            'url':'Train_Approach_n_Pass-Mike_Koenig-678807208.mp3' },
  { 'name':'Helicopter Pass',  'url':'Best_Helicopter_Pass-Mike_Koenig-1156203370.mp3' },
  { 'name':'Energyless robot', 'url':'Dying%20Robot-SoundBible.com-1721415199.mp3' }
];

const button_play  = document.querySelector('#button-play'),
      audio_player = new Audio(),
      WEB_URL = 'https://soundbible.com/mp3/';

button_play.addEventListener('click', startPlay);
window.addEventListener('DOMContentLoaded', initializeAudio);

function initializeAudio() {
  audio_player.onended = startPlay; // <-- TU
  audio_player.setAttribute('data-index-form-playlist', -1);
  button_play.removeAttribute('disabled');
}

function startPlay() {
  const song_index = indexFromPlaylist();

  audio_player.src = WEB_URL + play_list[song_index].url;
  audio_player.play();

  console.clear();
  console.log('Odtwarzam: ' + play_list[song_index].name); 
}

function indexFromPlaylist() {
  let index = parseInt(audio_player.getAttribute('data-index-form-playlist')) + 1;
  if (index >= play_list.length) index = 0;
  
  audio_player.setAttribute('data-index-form-playlist', index);

  return index;
}

 

 

 jak to przerobić na Vue.js?

nie pracowałem (i nie pracuję) z vue, więc ciężko Mi coś doradzić, ale może "wygeneruj" za jego pomocą button-a, a resztę kodu do odtwarzania muzyki "podepnij" jak zwykły js.

Podobne pytania

0 głosów
2 odpowiedzi 216 wizyt
pytanie zadane 17 grudnia 2018 w JavaScript przez wachcio Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 93 wizyt
pytanie zadane 9 lipca 2018 w JavaScript przez mi-20 Stary wyjadacz (12,590 p.)
0 głosów
1 odpowiedź 112 wizyt
pytanie zadane 25 czerwca 2018 w JavaScript przez mi-20 Stary wyjadacz (12,590 p.)

85,876 zapytań

134,650 odpowiedzi

298,919 komentarzy

56,744 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 1048p. - rucin93
  2. 1042p. - Whistleroosh
  3. 989p. - adrian17
  4. 984p. - Mikbac
  5. 982p. - Mateusz Bogdan
  6. 977p. - Michal Drewniak
  7. 967p. - nidomika
  8. 859p. - CC PL
  9. 854p. - Argeento
  10. 757p. - ScriptyChris
  11. 692p. - s. Dorota Kowalewska
  12. 683p. - tokox
  13. 660p. - Vinox
  14. 645p. - TheLukaszNs
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...