本文介绍了一种使用纯JavaScript实现的网页音乐播放器，通过创建DOM元素并利用JavaScript进行操作来实现音乐文件的选择、添加及播放功能。文章详细展示了如何通过JavaScript动态添加文件输入框，并将选择的音乐文件加入播放列表。
<script>
function $(name){
return document.getElementById(name);
}
function add(){
var add = document.createElement("input");
add.type = "file";
document.appendChild(add);
add.style.display = "none";
add.click();
addMusic(add.value);
}
function addMusic(filename){
var list = $("playlist").options;
var song = new Option(filename,filename);
list.add(song);
if(player != null){
player.currentPlayerlist;
for(var i=0;i<list.length;i++){
var song = player.newMedia(list[i].value);
player.currentPlaylist.appendItem(song);
}
}
}
var player;
function play(filename){
//之前可能已有界面或者已有播放
if(player != null){
player.controls.stop();
}else{
//添加身份证号
var playid = "CLSID:{6BF52A52-394A-11d3-B153-00C04F79FAA6}";
//生成一个婆放弃的对象
player = document.createElement("object");
//添加到层中
$("player").appendChild(player);
//绑定对象与驱动
player.classid = playid;
}
//往播放器中添加列表
var list = $("playlist").options;
for(var i=0;i<list.length;i++){
var song = player.newMedia(list[i].value);
player.currentPlaylist.appendItem(song);
}
player.controls.currentItem = player.currentPlaylist.item(list.selectedIndex);
player.controls.play();
}
</script>
<body>
<input type="button" onclick="add()" value="添加歌曲">
<select id="playlist" style="width:300px;" size="5" ondblclick="play(this.options[selectedIndex].innerText)">
</select>
<div id="player" style="width:300px;"></div>
</body>
扫一扫
982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
