一个简单的网页播放器

最新推荐文章于 2021-04-11 17:43:46 发布

原创最新推荐文章于 2021-04-11 17:43:46 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #function #xhtml #javascript #html

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的基本音乐播放器项目。该播放器具备播放、暂停、停止、上一首和下一首的功能，并支持用户手动添加新的音乐资源。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>永胜技术之家</title>
</head>

// Test for the player current state, display a message for each.
switch (NewState){
    case 1:
        myText.value = "Stopped";
        break;

    case 2:
        myText.value = "Paused";
        break;

    case 3:
        myText.value = "Playing";
        break;

// Other cases go here.

default:
myText.value = "";
}
</SCRIPT>

</p>
<p>
<label></label>
<label>
<input name="myText" type="text" id="myText" width="400" />
<input name="txtUrl" type="text" id="txtUrl" width="400" />
<input name="btnAdd" type="submit" id="btnAdd" value="添加" onclick="Add()" />
</label>
<select name="selUrl" size="15" multiple="multiple" id="selUrl" height="200">
    <option value="http://localhost/music/刀郎-情人.mp3">http://localhost/music/刀郎-情人.mp3</option>
    <option value="http://localhost/music/刘欢-在路上.mp3">http://localhost/music/刘欢-在路上.mp3</option>
    <option value="http://localhost/music/刘欢-得民心者得天下.mp3">http://localhost/music/刘欢-得民心者得天下.mp3</option>
    <option value="http://localhost/music/刘欢-从头再来.mp3">http://localhost/music/刘欢-从头再来.mp3</option>
            </select>
</p>
<p>

<label>
<input type="button" name="Submit" value="播放" onclick="Play()" />
</label>
<input type="button" name="Submit2" value="停止" onclick="Stop()"/>
<input type="button" name="Submit3" value="上一首" onclick="Prev()" />
<input type="button" name="Submit4" value="下一首" onclick="Next()" />
<input type="button" name="Submit5" value="添加歌曲" onclick="Add()"/>
<input type="button" name="Submit6" value="删除歌曲" />
</p>
<a href="http://www.livesnowfirst.cn">永胜技术之家</a>
</body>
</html>