Question

我想制作JavaScript HTML5播放器，但我不能使用常见的，我有mp3文件的大数据，每个文件都有唯一的ID，我无法理解，如何选择id和put URL到播放器？

我刚开始学习JS，并且无法弄清楚这个

<audio controls>
 <source src="song.mp3" type="audio/mpeg">
</audio> 

//////==== DOM ====///////

<div id="23231">
 <a href="audio/song-1.mp3"></a>
 <button>play</button>
</div>
<div id="34561">
 <a href="audio/song-3.mp3"></>
 <button>play</button>
</div>
<div id="67771">
 <a href="audio/song-4.mp3"></a>
 <button>play</button>
</div>

Answer 1

尝试$(this).parent().find('a').attr('href');使用class or tag代替id

$(document).on('click','button',function(){
  var src = $(this).parent().find('a').attr('href');
  $('source').attr('src',src)
  console.log( $('source').attr('src'))
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
 <source src="song.mp3" type="audio/mpeg">
</audio> 

//////==== DOM ====///////

<div id="23231">
 <a href="audio/song-1.mp3"></a>
 <button>play</button>
</div>
<div id="34561">
 <a href="audio/song-3.mp3"></a>
 <button>play</button>
</div>
<div id="67771">
 <a href="audio/song-4.mp3"></a>
 <button>play</button>
</div>

Answer 2

您应该在音频和源元素中添加id。

<audiod id="audioPlayer" controls>
 <source id="MP3source" src="song.mp3" type="audio/mpeg">
</audio>

普通Javascript

    var audio = document.getElementById('audioPlayer');

    var source = document.getElementById('MP3source');
    source.src= document.getElementById('23231')
               .getElementsByTagName('a')[0].href; 
    //set source.src to the link element inside the 23231 div

    audio.load(); //call this to just preload the audio without playing
    audio.play(); //call this to play the song right away

Answer 3

您可以尝试以下代码：

＆＃13;

function playmusic(file)
{

audio = file.parentNode.childNodes[1].getAttribute("href");
console.log(audio);
var obj = document.getElementById('player');
obj.src = audio;
obj.play();

}

＆＃13;

<audio id="player" controls>
 <source src="song.mp3" type="audio/mpeg">
</audio> 

//////==== DOM ====///////

<div id="23231">
 <a href="audio/song-1.mp3"></a>
 <button onClick="return playmusic(this)" >play</button>
</div>
<div id="34561">
 <a href="audio/song-3.mp3"></a>
 <button onClick="return playmusic(this)" >play</button>
</div>
<div id="67771">
 <a href="audio/song-4.mp3"></a>
 <button onClick="return playmusic(this)" >play</button>
</div>

＆＃13;

如何使用HTML5＆amp ;;选择具有唯一ID的音频文件URL JS？

3 个答案: