Как получить src аудиоэлемента из списка в javascript

onclick может принимать аргумент, представляющий событие «щелчок» (например, onclick = "getTrack(event)"). Внутри функции это событие щелчка имеет свойство .target, которое вы можете использовать для доступа к DOM и получения самого элемента кнопки. Затем вы можете «пройтись» вверх по дереву DOM и выбрать другой элемент, например:

function getTrack(event){
  const btn = event.target;
  const li = btn.parentElement;
  const audio = li.children[1];
  const src = audio.getAttribute("src");
  console.info(src);
}

Всегда используйте уникальный идентификатор для элементов. Передайте элемент при вызове функции и получите от него атрибут href.

function getTrack(id)
{

console.info(id.getAttribute("src"))
}

<ul id = "playList">
  <li>
    <a href = "audio/track1.mp3" >track1</a>
    <audio src = "audio/track1.mp3" id = "aud1"></audio>
    <button onclick = "getTrack(aud1)">get this track src</button>
  </li>
  <li>
    <a href = "audio/track2.mp3" >track2</a>
    <audio src = "audio/track2.mp3" id = "aud2"></audio>
    <button onclick = "getTrack(aud2)">get this track src</button>
  </li>
  <li>
    <a href = "audio/track3.mp3"  >track3</a>
    <audio src = "audio/track3.mp3" id = "aud3"></audio>
    <button onclick = "getTrack(aud3)">get this track src</button>
  </li>
</ul>

Я думаю, что братья и сестры — это то, что вам нужно. Вы можете использовать его следующим образом:

function getTrack(elm){
let $aud = $(elm).siblings( "audio" ).first();
console.info($aud.attr("src"));
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id = "playList">
  <li>
    <a href = "audio/track1.mp3">track1</a>
    <audio src = "audio/track1.mp3" id = "aud"></audio>
    <button onclick = "getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href = "audio/track2.mp3">track2</a>
    <audio src = "audio/track2.mp3" id = "aud"></audio>
    <button onclick = "getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href = "audio/track3.mp3">track3</a>
    <audio src = "audio/track3.mp3" id = "aud"></audio>
    <button onclick = "getTrack(this)">get this track src</button>
  </li>
</ul>

Редактировать: Объяснение кода:

Сначала в onclick на buttons нужно передать ключевое слово this, чтобы можно было получить элемент кнопки внутри вашей функции обратного вызова:

<button onclick = "getTrack(this)">get this track src</button>

После этого внутри вашей функции обратного вызова onclick аргументом elm является элемент кнопки, по которому нажимают, и мы преобразуем его в элемент jquery, используя $(elm) для использования это функция siblings, которая возвращает родственные элементы кнопки. Здесь мы используем селектор "audio", потому что мы просто хотим получить родственный элемент audio кнопки, а также first(), потому что функция siblings будет вернуть список совпадающих элементов, в то время как нам нужен только первый элемент.

let $aud = $(elm).siblings( "audio" ).first();

Итак, теперь $aud — это элемент audio, связанный с нажатой кнопкой, и мы должны получить его атрибут src с помощью функции attr.

console.info($aud.attr("src"));

Без jQuery вы можете использовать previousElementSibling для захвата соответствующего элемента audio кнопки и получения его значения src.

Здесь я также удалил встроенный JS и использовал addEventListener после выбора кнопок из DOM с помощью querySelectorAll, который является современным способом кодирования JS и делает вашу разметку более компактной. Я использовал присваивание деструктуризации, чтобы получить previousElementSibling из элемента, по которому щелкнули, и переименовал его в «аудио».

const buttons = document.querySelectorAll('#playList button');
[...buttons].forEach(button => button.addEventListener('click', getTrack, false));

function getTrack() {
  const { previousElementSibling: audio } = this;
  console.info(audio.src);
}

<ul id = "playList">
  <li>
    <a href = "audio/track1.mp3">track1</a>
    <audio src = "audio/track1.mp3" id = "aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href = "audio/track2.mp3">track2</a>
    <audio src = "audio/track2.mp3" id = "aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href = "audio/track3.mp3">track3</a>
    <audio src = "audio/track3.mp3" id = "aud"></audio>
    <button>get this track src</button>
  </li>
</ul>