想用怎么用js实现播放音频。

JavaScript015

想用怎么用js实现播放音频。,第1张

1、JS播放音乐需要区分浏览器,来使用不用的对象来播放音乐

2、在播放控制上要有【播放】和【停止】来控制音乐的播放

基于以上思路,代码如下:

<SCRIPT type="text/javascript">  

if(-1 != navigator.userAgent.indexOf("MSIE"))

{

    //不是微软IE浏览器,则调用Flash来播放音乐

    document.write(' <OBJECT id="Player"')  

    document.write(' classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"')

    document.write(' width=0 height=0 > <param name="URL" value="a.mp3" /> <param name="AutoStart" value="false" /> </OBJECT>')  

}  

else  

{

    //是微软IE浏览器,则调用微软的Player对象来直接播放音乐

    document.write(' <OBJECT id="Player"')  

    document.write(' type="application/x-ms-wmp"')  

    document.write(' autostart="false" src= "a.mp3" width=0 height=0> </OBJECT>')  

}  

</SCRIPT>  

<input type=button value="播放" onclick="Player.controls.play()" />

<input type=button value="停止" onclick="Player.controls.stop()" />

第一段:

<embed src="等一分钟.mp3" id="aa">

<input type=button value=暂停 onclick="aa.pause()">

<input type=button value=播放 onclick="aa.play()">

第二段:

<audio id="aaa" src="等一分钟.mp3" autoplay controls></audio>

<input type=button value=暂停 onclick="aaa.pause()">

<input type=button value=播放 onclick="aaa.play()">

IE:支持第一段代码,不支持第二段代码

Firefox:支持第二段代码,第一段代码的第一行需要装插件,不支持第一段的后两行

Chrom:支持第二段代码,不支持第一段代码中的后两行

Opera,Safari:第一段代码的第一行需要装插件,不支持第一段的后两行,不支持第二段代码

controls.currentPosition

这个属性可以用来控制当前歌曲播放的进度,可写,比如设置

document.getElementById("wmpid").controls.currentPosition = 18

就是将当前歌曲进到18秒,我没有试过非整数部分可不可以生效(应该是可以的)

controls.currentPositionString

这是个只读属性。比如当前歌曲在18秒出则值为00:18.

至于你说的进度条,控制起来是用event.clientX属性,这是鼠标相对于窗口的横坐标。用这个数字减去那个进度条DIV的clientX属性就是鼠标在进度条上的位置。你自己可以作些加减微调确保结果适当。如果宽度100px,你点的位置是40px.那么用40/100*歌曲长度就是当前应该跳转到的位置了。

加入滑块也很简单,网上有很多drag类,加一个进去稍微调整一下就比较好了

顺便也贴一下wmp组件的基本属性吧,LZ如果没有的话可以稍微参考一下

URL:String指定媒体位置,本机或网络地址

uiMode:String播放器界面模式,可为Full, Mini, None, Invisible

playState:integer播放状态,1=停止,2=暂停,3=播放,6=正在缓冲,9=正在连接,10=准备就绪

enableContextMenu:Boolean启用/禁用右键菜单

fullScreen:boolean是否全屏显示

[controls] wmp.controls //播放器基本控制

controls.play播放

controls.pause暂停

controls.stop停止

controls.currentPosition:double当前进度

controls.currentPositionString:string当前进度,字符串格式。如“00:23”

controls.fastForward快进

controls.fastReverse快退

controls.next下一曲

controls.previous上一曲

[settings] wmp.settings //播放器基本设置

settings.volume:integer音量,0-100

settings.autoStart:Boolean是否自动播放

settings.mute:Boolean是否静音

settings.playCount:integer播放次数

[currentMedia] wmp.currentMedia //当前媒体属性

currentMedia.duration:double媒体总长度

currentMedia.durationString:string媒体总长度,字符串格式。如“03:24”

currentMedia.getItemInfo(const string)获取当前媒体信息"Title"=媒体标题,"Author"=艺术家,"Copyright"=版权信息,"Description"=媒体内容描述,"Duration"=持续时间(秒),"FileSize"=文件大小,"FileType"=文件类型,"sourceURL"=原始地址

currentMedia.setItemInfo(const string)通过属性名设置媒体信息

currentMedia.name:string同 currentMedia.getItemInfo("Title")

[currentPlaylist] wmp.currentPlaylist //当前播放列表属性

currentPlaylist.count:integer当前播放列表所包含媒体数

currentPlaylist.Item[integer]获取或设置指定项目媒体信息,其子属性同wmp.currentMedia

播放器界面做的很不错,请继续努力

------

问题补充:

那么 wmp在Firefox下如何控制?

-----

目前我所知道的firefox下同样支持以上属性。只是调用时候要这样<object type="application/x-ms-wmp">,其他都相同。我用的是firefox3.6,安装了wmp扩展控件。没有安装的用户可能不能正常浏览你的页面。

另外在测试的时候发现直接在原来的object里添加type属性不行,但是用一个新的object可以,原因未知。我想是不是不认clsid的问题。如果真是这样,可能需要用程序判断浏览器然后动态写入相应的object元素?

另外查找资料的时候发现了这篇文章

可以作为参考

以上