创建 HTML 可以在音频播放器中播放的音乐下拉列表
Create HTML dropdown list of music that can be played inside an audio player
我正在尝试为我的网站创建一个简单的音乐播放器,用户可以在其中 select 从下拉列表中选择许多不同的音乐曲目。音乐存储在我们的服务器上。
这是我目前的情况:http://jsfiddle.net/rUf6j/7/我只需要将选项移动到下拉列表中。
HTML:
<audio id="player" controls="controls">
<source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
<table>
<tr>
<td>Flying in clouds</td>
<td><a href="#" source="http://www.culturedub.com/assets/04-Forward.mp3">Listen</a></td>
</tr>
<tr>
<td>Chilling on beach</td>
<td><a href="#" source="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Listen</a></td>
</tr>
</table>
jQuery:
$(document).ready(function(){
$('[source]').on('click', function(){
change( $(this).attr('source') );
});
});
JS:
function change(sourceUrl) {
var audio = document.getElementById("player"),
source = document.getElementById("mp3_src");
source.src = sourceUrl;
audio.pause();
audio.load();
audio.play();
}
监听<select>
的改变事件,根据<option>
的值改变音频。
HTML:
<label>Select a track:
<select id="songpicker">
<option selected="" disabled>Select a track</option>
<option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
<option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
</label>
JavaScript:
$('#songpicker').on('change', function() {
change( $(this).val() );
})
只需将 links 移动到 select
,其中 option
值是 link 到源,文本是歌曲名称。将事件更改为 .on('change')
$(document).ready(function() {
$('#selection').on('change', function() {
change($(this).val());
});
});
function change(sourceUrl) {
var audio = document.getElementById("player");
var source = document.getElementById("mp3_src");
audio.pause();
if (sourceUrl) {
source.src = sourceUrl;
audio.load();
audio.play();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selection">Listen:</label>
<select id="selection">
<option value="">- Select track -</option>
<option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
<option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
<br/>
<audio id="player" controls="controls">
<source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />Your browser does not support the audio element.
</audio>
$('#songpicker').on('change', function() {
change( $(this).val() );
})
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<label>Select a track:
<select id="songpicker">
<option selected="" disabled>Select a track</option>
<option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
<option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
</label>
我正在尝试为我的网站创建一个简单的音乐播放器,用户可以在其中 select 从下拉列表中选择许多不同的音乐曲目。音乐存储在我们的服务器上。
这是我目前的情况:http://jsfiddle.net/rUf6j/7/我只需要将选项移动到下拉列表中。
HTML:
<audio id="player" controls="controls">
<source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
<table>
<tr>
<td>Flying in clouds</td>
<td><a href="#" source="http://www.culturedub.com/assets/04-Forward.mp3">Listen</a></td>
</tr>
<tr>
<td>Chilling on beach</td>
<td><a href="#" source="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Listen</a></td>
</tr>
</table>
jQuery:
$(document).ready(function(){
$('[source]').on('click', function(){
change( $(this).attr('source') );
});
});
JS:
function change(sourceUrl) {
var audio = document.getElementById("player"),
source = document.getElementById("mp3_src");
source.src = sourceUrl;
audio.pause();
audio.load();
audio.play();
}
监听<select>
的改变事件,根据<option>
的值改变音频。
HTML:
<label>Select a track:
<select id="songpicker">
<option selected="" disabled>Select a track</option>
<option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
<option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
</label>
JavaScript:
$('#songpicker').on('change', function() {
change( $(this).val() );
})
只需将 links 移动到 select
,其中 option
值是 link 到源,文本是歌曲名称。将事件更改为 .on('change')
$(document).ready(function() {
$('#selection').on('change', function() {
change($(this).val());
});
});
function change(sourceUrl) {
var audio = document.getElementById("player");
var source = document.getElementById("mp3_src");
audio.pause();
if (sourceUrl) {
source.src = sourceUrl;
audio.load();
audio.play();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selection">Listen:</label>
<select id="selection">
<option value="">- Select track -</option>
<option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
<option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
<br/>
<audio id="player" controls="controls">
<source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />Your browser does not support the audio element.
</audio>
$('#songpicker').on('change', function() {
change( $(this).val() );
})
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<label>Select a track:
<select id="songpicker">
<option selected="" disabled>Select a track</option>
<option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
<option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
</label>