Поменять текст в бегущей строке по клику в ячейке таблицы

Web Frontend: JavaScript, HTML/CSS
#1

хочу сделать плеер на одностраничнике с бегущей строкой, где пишется какая музыка сейчас играет. по клику на ячейку таблицы с названием песни меняется текст в бегущей строке. не понимаю как это реализовать на js, чтобы работало
я только изучаю все это дело, поэтому вот мой быдлокод:

<table>
<tr><td id="source/audio/Aerosmith.mp3"><div class=text-1>01. Aerosmith</div></td><tr>
<tr><td id="source/audio/Animals.mp3"><div class=text-1>02. Animals</div></td><tr>
<tr><td id="source/audio/Bravo.mp3"><div class=text-1>03. Bravo</div></td><tr>
</table>
<audio autoplay id="myaudio"><source src="http://lel.com/link/to/stream.m3u"></audio>
<marquee><p class=playlist>Сейчас ничего не играет</p></marquee>
<script>
var alles_td = document.getElementsByTagName("td");
for(var i = 0; i < alles_td.length; i++){
    alles_td[i].onclick = function(){
        audio.src = this.id;
    audio.volume = 0.25;
        audio.play();}}
</script>
<script>
function(){
var playlist = document.querySelectorAll('playlist');
td = document.getElementsByTagName("td");
$("td").onclick = function(){
if td_id='source/audio/Aerosmith - Walk This Way.mp3';
playlist.innerHTML = 'Сейчас играет Aerosmith';
if td_id='source/audio/Animals - House of the Rising Sun.mp3';
playlist.innerHTML = 'Сейчас играет Animals';}
</script>
#2

Для хранения данных в элементах лучше data- атрибуты использовать.
Using data attributes - Learn web development | MDN

И для списка проще ul или ol, а не таблицу.

<ol class="playlist">
  <li data-src="source/audio/Aerosmith.mp3" data-name="Aerosmith - Walk This Way">Aerosmith</li>
  <li data-src="source/audio/Animals.mp3" data-name="Animals - House of the Rising Sun">Animals</li>
  <li data-src="source/audio/Bravo.mp3" data-name="Bravo">Bravo</li>
</ol>

<audio></audio>

<marquee>Сейчас ничего не играет</marquee>

<script>
  const statusBar = document.querySelector('marquee')
  const audio = document.querySelector('audio')

  const songElements = document.querySelectorAll('.playlist li')
  songElements.forEach(el => {
    el.addEventListener('click', () => {
      const src = el.dataset.src
      const name = el.dataset.name

      statusBar.innerHTML = `Сейчас играет ${name}`

      audio.src = src
    })
  })
</script>

https://jsfiddle.net/AlexP11223/2raw17x5/35/

#3

спасибо большое :slight_smile:
правда, чтобы заработало воспроизведение аудио по клику в списке, я включил li в td, а data-src вынес как id в td
ваше решение помогло!

#4

Это как? :thinking:
Обработка клика работает же тут, и src плеера меняется.

#5

у меня audio не видит data-src, и по клику не воспроизводит аудио, только если в панели плеера самому включить
а с id воспроизводит аудио после клика

#6

Всё видит, можно убедиться открыв вкладку Network в DevTools браузера )

image
image985×178 19.2 KB

Только там воспроизведение не начиналось потому что надо добавить autoplay или вызывать audio.play().

<ol class="playlist">
  <li data-src="https://www.kozco.com/tech/piano2-CoolEdit.mp3" data-name="Aerosmith - Walk This Way">Aerosmith</li>
  <li data-src="https://www.kozco.com/tech/organfinale.mp3" data-name="Animals - House of the Rising Sun">Animals</li>
  <li data-src="source/audio/Bravo.mp3" data-name="Bravo">Bravo</li>
</ol>

<audio autoplay></audio>

<marquee>Сейчас ничего не играет</marquee>

<script>
  const statusBar = document.querySelector('marquee')
  const audio = document.querySelector('audio')

  const songElements = document.querySelectorAll('.playlist li')
  songElements.forEach(el => {
    el.addEventListener('click', () => {
      const src = el.dataset.src
      const name = el.dataset.name

      statusBar.innerHTML = `Сейчас играет ${name}`

      audio.src = src
    })
  })
</script>

https://jsfiddle.net/AlexP11223/2raw17x5/40/

2 лайка