我正在尝试使用一个HTML音频播放器,当选择播放曲目列表中的其他歌曲时,src属性会交换。
我写了下面的代码,它可以很好地交换播放器中的src,但是播放器播放的实际歌曲不会更新,即使这个新的src url已经被交换。
任何想法都将不胜感激。
<!-- PLAYER -->
<div id="player_container">
<div id="player_wrapper">
<audio id="player" controls>
<source src="default_song_url" type="audio/ogg">
<source src="default_song_url" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<!-- TRACK LIST (fed through a for loop for other songs) -->
<tr>
<td>Song title</td>
<td><a class="play_song1">Play</a> </td>
<script>
$(document).ready(function(){
$(".play_song1").click(function(){
$("#player_wrapper source").attr("src", "song_1_url");
});
});
</script>
</tr>
最佳答案
更新
只是增加了更多的细节,一个更大的播放列表,并使用一个更容易扩展的数组。下一个改进是json。
使用普通javascript有时比jquery简单,比如音频和视频。
使用getElementById
获取对#player
的引用
然后,.src
属性按点符号更改。
当您交换.load
时需要src
方法。
当然还有。
通常,我会对click事件使用.play
,但jquery更容易。
注意:尽管addEventListener
属性位于src
上,但请注意,我引用的是<source>
。
另请注意:我删除了ogg,因为mp3现在是通用的,而且在未来几年里我看不到这种变化。
另一个注意事项:不要使用<audio>
或它的任何接口(即<table>
等)进行布局,它们用于数据。
$(document).ready(function() {
// Playlist is an array of 5 songs.²
var playlist = ['balls.mp3', 'pf-righteous.mp3', 'fightclub.mp3', '111.mp3', '00.mp3'];
// A delegated click event is on each li.song
// when triggered the following happens:
$(".song").on('click', function(e) {
// This prevents the anchors from jumping like they normally do.
e.preventDefault();
// $(this) is the li.song that was picked by user. Use .data()
// to determine the li.song's index number.
var song = $(this).data('idx');
// Reference the audio element
var ply = document.getElementById('player');
// This url is the location where the mp3s reside.¹
var base = 'http://glpjt.s3.amazonaws.com/so/av/';
// Here the src is concatenated
// 1. The base¹ URL +
// 2. The playlist array² index is machted with #playlist li.play.³
// 3. After the new src is made, load() the player and play()
ply.src = base + playlist[song];
ply.load();
ply.play();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="playerBox">
<div id="playerLayer">
<audio id="player" controls>
<source src="http://glpjt.s3.amazonaws.com/so/av/pf-righteous.mp3" type="audio/mpeg">
</audio>
</div>
<dl id="playlist">
<dt>Playlist</dt>
<!--Each list item has a unique data-idx='x' and an identical .song class.³-->
<a href="#" data-idx="0" class="song">
<dd>Play 0</dd>
</a>
<a href="#" data-idx="1" class="song">
<dd>Play 1</dd>
</a>
<a href="#" data-idx="2" class="song">
<dd>Play 2</dd>
</a>
<a href="#" data-idx="3" class="song">
<dd>Play 3</dd>
</a>
<a href="#" data-idx="4" class="song">
<dd>Play 4</dd>
</a>
</dl>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>