JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="file[]" size="30" id="fileInput1">

<audio id="audio_1" controls preload loop>
<source src="">
</audio>

<br>

<input type="text" name="file[]" size="30" id="fileInput2">

<audio id="audio_2" controls preload loop>
<source src="">
</audio>

<br>

<input type="text" name="file[]" size="30" id="fileInput3">

<audio id="audio_3" controls preload loop>
<source src="">
</audio>

<br>

<input type="text" name="file[]" size="30" id="fileInput4">

<audio id="audio_4" controls preload loop>
<source src="">
</audio>

<br>

<input type="text" name="file[]" size="30" id="fileInput5">

<audio id="audio_5" controls preload loop>
<source src="">
</audio>

<br>

<input type="text" name="file[]" size="30" id="fileInput6">

<audio id="audio_6" controls preload loop>
<source src="">
</audio>

<br>

JavaScript

document.getElementById('fileInput1').onchange = function newSite() {
    document.getElementById('audio_1').src = this.value;
};
  
document.getElementById('fileInput2').onchange = function newSite() {
    document.getElementById('audio_2').src = this.value;
};

document.getElementById('fileInput3').onchange = function newSite() {
    document.getElementById('audio_3').src = this.value;
};

document.getElementById('fileInput4').onchange = function newSite() {
    document.getElementById('audio_4').src = this.value;
};

document.getElementById('fileInput5').onchange = function newSite() {
    document.getElementById('audio_5').src = this.value;
};

document.getElementById('fileInput6').onchange = function newSite() {
    document.getElementById('audio_6').src = this.value;
};