求一网页MP3播放器代码

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求一网页MP3播放器代码相关的知识，希望对你有一定的参考价值。

求网页MP3播放器代码，要有播放列表，能加几首歌以上的。多谢啦。如果没有MP3的，别的格式也行
希望各位在发代码之前要进行检验，免得发错的代码过来。

<html>
<head>
<title>aboutplayer</title>
<style>
body
overflow:auto;
font-size:12px;
cursor:default;
background-color: #977E4A;


#table01
font-size:12px;
background-Color:black;
color:white;
text-align:center;


#playListTitle
background-Color:#001122;
color:white;
font-size:12px;
font-weight:bold;
width:100%;
height:16px;
padding:2px;


#playList
width:150px;
height:225px;
margin:0px;
font-size:12px;
background-Color:black;
color:white;


#musicList
width:200px;
border:buttonface 4px groove;
height:80px;
position:absolute;
right:5px;
top:23px;
left: -1px;


#musicListTitle
font-size:13px;
width:100%;
height:20px;
background-Color:#C5FFC5;
padding:3px;
font-weight:bold;


#musicList a
text-decoration:none;
width:100%;
height:20px;
line-height:20px;
font-szie:20px;
line-height:20px;
padding-top:5px;
padding-left:10px;


#musicList a:hover
background-Color:#E5FFE5;

.style1
color: #006699;
font-weight: bold;

.style2 font-size: 12px
a:link
text-decoration: none;

a:visited
text-decoration: none;

a:hover
text-decoration: none;

a:active
text-decoration: none;

.style4 font-size: 12px; color: #FFFF33;
.style7 font-family: "Times New Roman", Times, serif
</style>
<script>

function playList_dragOver()
event.returnValue=false;


function playList_dragEnter()
event.returnValue=false;
event.dataTransfer.dropEffect='link';


function addMusic()
if(event.srcElement.tagName=='A')
strTxt=event.srcElement.innerText;
strURL=event.srcElement.href;
playList.innerHTML="";
playList.options[0]=new Option(strTxt,strURL);
playList.options[0].selected=true;

event.returnValue=false;

playList_dblClick();
return(false);


function playList_drop()
strTxt=unescape(event.dataTransfer.getData('Text').split(":")[0]);
strURL=unescape(event.dataTransfer.getData('Text').split(":")[1]);
playList.options[playList.options.length]=new Option(strTxt,strURL);


function playList_keyDown()
if(event.keyCode==46)
try
playList.options[playList.options.selectedIndex].outerHTML="";
catch(e)
return(false);

if(event.keyCode==13)
playList_dblClick();
return(false);



function playList_dblClick()
MediaPlayer1.detachEvent("PlayStateChange",checkPlayStatus);
MediaPlayer1.fileName=playList.value;
MediaPlayer1.play();
setTimeout('MediaPlayer1.play();MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);',1000);


function musicList_dragStart()
if(event.srcElement.tagName=='A')
event.dataTransfer.setData('Text',escape(event.srcElement.innerText)+":"+escape(event.srcElement.href));
else
return(false);



function init()
MediaPlayer1.AutoRewind=false;
MediaPlayer1.AutoStart=true;
MediaPlayer1.SendPlayStateChangeEvents=true;
MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);


function checkPlayStatus(oldState,newState)
try
if(MediaPlayer1.PlayState==0)
MediaPlayer1.detachEvent("PlayStateChange",checkPlayStatus);
MediaPlayer1.stop();
if(playList.options.selectedIndex<playList.options.length-1)
playList.options[playList.options.selectedIndex+1].selected=true;
else
playList.options[0].selected=true;

MediaPlayer1.fileName=playList.value;
MediaPlayer1.play();
setTimeout('MediaPlayer1.play();MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);',1000);

catch(e)

</script>
<script>
function doFull()

var objId = "MediaPlayer1";
var funcStr = objId + ".displaySize = 3";
eval(funcStr);

</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><body onload="init();">
<table id=table01>
<tr>
<td>
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="286" height="225" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<param name="Audiostream" value="-1">
<param name="AutoSize" value="-1">
<!--是否自动调整播放大小-->
<param name="AutoStart" value="0">
<!--是否自动播放-->
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<!--左右声道平衡,最左-9640,最右9640-->
<param name="BaseURL" value>
<param name="BufferingTime" value="15">
<!--缓冲时间-->
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="0">
<!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0-->
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">
<!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理-->
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="1">
<!-是否用右键弹出菜单控制-->
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">
<!--是否允许拉动播放进度条到任意地方播放-->
<param name="Filename" value="" valuetype="ref">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<!--是否静音-->
<param name="PlayCount" value="10">
<!--重复播放次数,0为始终重复-->
<param name="PreviewMode" value="-1">
<param name="Rate" value="1">
<!--播放速度1.0-2.0倍的速度播放-->
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<!--选择同时播放(伴音)的歌曲-->
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<!--是否显示字幕,为一块黑色,下面会有一大块黑色,一般不显示-->
<param name="ShowControls" value="-1">
<!--是否显示控制,比如播放,停止,暂停-->
<param name="ShowAudioControls" value="-1">
<!--是否显示音量控制-->
<param name="ShowDisplay" value="0">
<!--显示节目信息,比如版权等-->
<param name="ShowGotoBar" value="0">
<!--一条框,在下面,有往下箭头-->
<param name="ShowPositionControls" value="-1">
<!--是否显示往前往后及列表,如果显示一般也都是灰色不可控制-->
<param name="ShowStatusBar" value="-1">
<!--当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间-->
<param name="ShowTracker" value="-1">
<!--是否显示当前播放跟踪条,即当前的播放进度条-->
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<!--显示部的宽部,如果小于视频宽,则最小为视频宽,或者加大到指定值,并自动加大高度.此改变只改变四周的黑框大小,不改变视频大小-->
<param name="VideoBorderColor" value="0">
<!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色-->
<param name="VideoBorder3D" value="0">
<param name="Volume" value="0">
<!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640,最大0-->
<param name="WindowlessVideo" value="0">
<embed src="-1" width="286" height="225" autostart="0" audiostream="-1" autosize="-1" animationatstart="-1" allowscan="-1" allowchangedisplaysize="-1" autorewind="0" balance="0" baseurl="value" bufferingtime="15" captioningid="value" clicktoplay="-1" cursortype="0" currentposition="0" currentmarker="0" defaultframe="value" displaybackcolor="0" displayforecolor="16777215" displaymode="0" displaysize="0" enabled="-1" enablecontextmenu="-1" enablepositioncontrols="-1" enablefullscreencontrols="-1" enabletracker="-1" filename="" invokeurls="-1" language="-1" mute="0" playcount="10" previewmode="-1" rate="1" samilang="value" samistyle="value" samifilename="value" selectionstart="-1" selectionend="-1" sendopenstatechangeevents="-1" sendwarningevents="-1" senderrorevents="-1" sendkeyboardevents="0" sendmouseclickevents="0" sendmousemoveevents="0" sendplaystatechangeevents="-1" showcaptioning="0" showcontrols="-1" showaudiocontrols="-1" showdisplay="0" showgotobar="0" showpositioncontrols="-1" showstatusbar="-1" showtracker="-1" transparentatstart="-1" videoborderwidth="0" videobordercolor="0" videoborder3d="0" volume="0" windowlessvideo="0"></embed>
<!--如果是0可以允许全屏,否则只能在窗口中查看-->
</object>
</td>
<td>
<div id=playListTitle>Play List:</div>
<select id=playList size=2 ondragover="playList_dragOver();" ondragenter="playList_dragEnter();"
ondrop="playList_drop();" onkeydown="playList_keyDown();" ondblclick="playList_dblClick();">
</select>
</td>
</tr>
</table>
<script language="javascript1.2">

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name)
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns


function gons(e)
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y

function dragns(e)
if (dragswitch==1)
temp.moveBy(e.x-nsx,e.y-nsy)
return false



function stopns()
temp.releaseEvents(Event.MOUSEMOVE)


//drag drop function for IE 4+////
/////////////////////////////////

var dragapproved=false

function drag_dropie()
if (dragapproved==true)
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false



function initializedragie()
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie


if (document.all)
document.onmouseup=new Function("dragapproved=false")


////drag drop functions end here//////

function hidebox()
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"


</script>
<div id="showimage" style="position:absolute; width:500px; left:465px; top:18px; height: 0px;">
<table border="0" width="199" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36">
<tr>
<td width="100%" bgcolor="#C6FFC6" style="padding:4px" onMousedown="initializedragie()"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0" class="style1">
<div align="left" class="style2">
<div align="center">用鼠标按着我拖拖看<span class="style7">^o^</span></div>
</div>
</layer>
</ilayer></td>
<td bgcolor="#00CCFF" style="cursor:hand"><strong><a href="#" onClick="hidebox();return false">×</a></strong></td>
</tr>
<tr>
<td width="100%" style="padding:4px" colspan="2"><p> </p>
<div id=musicList ondragstart="musicList_dragStart();">
<div class="style2" id=musicListTitle>All Music</div>
<span class="style2"><a href="http://www.gyvnet.com/music_new/web/user/usermusic/2947/2005030813201579754.mp3" onclick="addMusic();">麻吉弟弟 甜蜜蜜</a><br>
<a href="http://www.gyvnet.com/music_new/web/user/usermusic/2308/2005063004283371564.mp3" onclick="addMusic();">第一滴泪 - 动力火车</a><br>
<a href="http://211.90.238.134/blog/upload/music/half.sugar.wma" onclick="addMusic();">半糖主义 - SHE</a><br>
<a href="http://web.163.sh.cn/~kkyhm/music/3.wma" onclick="addMusic();">发如雪 - 周杰伦</a></span><br>
<hr>
<span class="style4">Tips: 把歌曲拖入播放列表<br>
</span>
<input type="button" class="style2" onclick="doFull();" value="全屏/ESC返回">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id=info></div>
<body>
</html>

各种网页播放器代码大全http://www.webjx.com/htmldata/2005-03-02/1109746478.html 参考技术A 随机生成三个整数
X
Y
Z
然后用if判断
下边两个整式是否为真就可以了
5*X+3*Y+Z/3=100;
X+Y+Z=100; 参考技术B http://www.hellocode.cn/mp3/一路上有你.mp3"/>

HTML5 播放器在网页上显示，但 mp3 声音不播放

【中文标题】HTML5 播放器在网页上显示，但 mp3 声音不播放【英文标题】：HTML5 player shows on webpage but, mp3 sound not playing 【发布时间】：2020-03-14 05:48:26 【问题描述】：

我是编程新手，我正在尝试在播放器正在显示的 django 网页上放置一个 mp3 文件和播放器，但是歌曲没有播放。

**models.py** 

from django.db import models
from django.contrib.auth.models import User


class Song(models.Model):
    name = models.CharField(max_length=125)
    audio_file = models.FileField('media/')

**audio.html**
    <!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="JesusChrist.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

**media folder**
JesusChrist.mp3

**Settings.py**

STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'firegod/static/media')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'media')
STATIC_URL = '/media/'

【问题讨论】：

看看这个Simple Is Better Than Complex 是的，我看过了，但还是有问题 【参考方案1】：

This video 是一个很好的参考，应该把所有的东西都拼出来。他展示了文件上传后的去向以及如何在模板中访问它们。

你遇到的另一个问题是：

# Sets STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# Sets STATIC_URL
STATIC_URL = '/static/'

# Overwrites STATIC_ROOT
STATIC_ROOT = os.path.join(BASE_DIR, 'media')
# Overwrites STATIC_URL
STATIC_URL = '/media/'

我相信你想要的是：

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

然后您应该可以在以下位置找到您的文件 src="media/audio.mp3"。如果需要，print 上传文件的 url，以便您知道在哪里找到它。

我正要深入研究这个，所以我可能有点偏离，尽管我知道上面链接的视频非常有益。

【讨论】：

以上是关于求一网页MP3播放器代码的主要内容，如果未能解决你的问题，请参考以下文章

HTML网页中的音乐播放代码

在网页后台播放 MP3

最简单的向HTML网页添加背景音乐的方法

HTML5 播放器在网页上显示，但 mp3 声音不播放

怎么在HTML插入音乐自动播放的代码

现成的网页MP3播放器JS，帮我修改成可自动连播的。