javascript写的一个MidiaPlayer的类

最新推荐文章于 2024-05-31 10:26:40 发布
最新推荐文章于 2024-05-31 10:26:40 发布
阅读量661 收藏
点赞数
分类专栏： web开发 文章标签： javascript function xhtml object div html

运行时候根据需求，改动这里即可

mpl.OpenUrl("DuskToDawn.wma");

下面是完整代码：

view plaincopy to clipboardprint?
<!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> 
    <title>MediaPlayer示例</title> 
    <mce:style type="text/css"><!--  
        body  
        {  
            font-size:12px;  
            font-family:宋体;  
        }  
        #divMpl  
        {  
            height: 137px;  
            width: 277px;  
        }  
        #divMsg  
        {  
            height: 155px;  
            overflow:auto;  
            width: 376px;  
        }  
      
--></mce:style><style type="text/css" mce_bogus="1">        body  
        {  
            font-size:12px;  
            font-family:宋体;  
        }  
        #divMpl  
        {  
            height: 137px;  
            width: 277px;  
        }  
        #divMsg  
        {  
            height: 155px;  
            overflow:auto;  
            width: 376px;  
        }  
    </style> 
    <mce:script language="javascript" type="text/javascript"><!--  
    /* MediaPlayer类定义 冰点原创 */  
    function MediaPlayer()  
    {  
        this.dom=null;  
    }  
    MediaPlayer.uiMode=  
    {  
        Full:"full",  
        Mini:"mini",  
        None:"none",  
        Invisible:"invisible"  
    }  
    MediaPlayer.prototype={  
        CreateAt:function(id)   //在指定ID的标签中创建MediaPlayer控件，大小由该标签决定  
        {  
            this.dom=document.createElement("object");  
            this.dom.classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6";  
            this.dom.style.width="100%";  
            this.dom.style.height="100%";  
            var container=document.getElementById(id);  
            container.innerHTML="";  
            container.appendChild(this.dom);  
            this._Init();  
        },  
        BindID:function(id) //绑定一个已存在的Object标签，该标签应该为一个MediaPlayer控件  
        {  
            this.dom=document.getElementById(id);  
            this._Init();  
        },  
        _Init:function()    //初始化，注册事件  
        {  
            var _this=this;  
            this.dom.attachEvent("PlayStateChange",  
                function(newState){_this.onPlayStateChange(newState)});  
            this.dom.attachEvent("Buffering",function(bStart){ _this.onBuffering(bStart) });  
            this.dom.attachEvent("Error",function(){ _this.onError(); });  
            this.dom.attachEvent("PositionChange",  
                function(oldPos,newPos){ _this.onPositionChange(oldPos,newPos); } );  
            this.dom.attachEvent("StatusChange",function(){ _this.onStatusChange(); })  
        },  
        onPlayStateChange:function(newState)  
        {  
            switch(newState)  
            {  
            case 1: //wmppsStopped  
                this.onStop();  
                break;  
            case 2:  //wmppsPaused  
                this.onPaused();  
                break;  
            case 3:  //wmppsPlaying  
                this.onPlay();  
                break;  
            case 4:  //wmppsScanForward  
                break;  
            case 5:  //wmppsScanReverse  
                break;  
            case 6:  //wmppsBuffering  
                this.onBuffering_SC();  
                break;  
            case 7:  //wmppsWaiting  
                break;  
            case 8:  //wmppsMediaEnded  
                this.onMediaEnded();  
                break;  
            case 9:  //wmppsTransitioning  
                this.onTransitioning();  
                break;  
            case 10:  //wmppsReady  
                break;  
            case 11:  //wmppsReconnecting  
                break;  
            case 12:  //wmppsLast  
                break;  
            case 0:  //wmppsUndefined  
                break;  
            default:  
                break;  
            }  
        },  
        // 事件列表  
        onStop:function(){},  
        onPaused:function(){},  
        onPlay:function(){},  
        onBuffering_SC:function(){},  
        onTransitioning:function(){},  
        onMediaEnded:function(){},  
        onError:function(){},  
        onPositionChange:function(oldPos,newPos){},  
        onStatusChange:function(){},  
        onBuffering:function(bStart){},  
          
        // 设置 暂时只做两个  
        setMode:function(mode){ this.dom.uiMode=mode; },  
        setValume:function(v){ this.dom.settings.volume=v; },  
          
        // 各种属性  
        getMediaName:function()  
        {  
            var media=this.dom.currentMedia;  
            if(media)  
            {  
                return media.name;  
            }  
            return "";  
        },  
        getMediaDuration:function()  
        {  
            var media=this.dom.currentMedia;  
            if(media)  
            {  
                return media.duration;  
            }  
            return "";  
        },  
        getMediaDurationString:function()  
        {  
            var media=this.dom.currentMedia;  
            if(media)  
            {  
                return media.durationString;  
            }  
            return "";  
        },  
        getStatus:function(){ return this.dom.status; },  
        getPosition:function(){ return this.dom.controls.currentPosition; },  
        getPositionString:function(){ return this.dom.controls.currentPositionString; },  
        getPlayState:function(){ return this.dom.playState; },  
          
        // 操作方法  
        OpenUrl:function(URL){ this.dom.URL=URL; },  
        Play:function(){ this.dom.controls.play(); },  
        Pause:function(){ this.dom.controls.pause();},  
        Stop:function(){ this.dom.controls.stop(); }  
    }  
    /* MediaPlayer类定义 冰点原创 */  
      
    var mpl=new MediaPlayer();  //创建一个MediaPlayer  
    window.οnlοad=function()  
    {  
        mpl.CreateAt("divMpl");  
        mpl.setValume(100);  
        mpl.setMode(MediaPlayer.uiMode.Full);  
        mpl.onPlay=function(){ ShowMessage("正在播放["+this.getMediaName()+"]"); };  
        mpl.onPaused=function(){ ShowMessage("暂停"); };  
        mpl.onMediaEnded=function(){ ShowMessage("播放结束"); };  
        mpl.onStop=function(){ ShowMessage("停止"); };  
        mpl.onPositionChange=function(oldPos,newPos){  
            var pos1={  
                min:parseInt(oldPos/60),  
                sec:parseInt(oldPos%60)  
            }  
            var pos2={  
                min:parseInt(newPos/60),  
                sec:parseInt(newPos%60)  
            }  
            ShowMessage(pos1.min+":"+pos1.sec+ "->"+ pos2.min+":"+pos2.sec);  
        };  
        //mpl.onStatusChange=function(){ ShowMessage(this.getStatus()); };  
        mpl.OpenUrl("DuskToDawn.wma");  
        window.setInterval("ShowPlayTime()",1000);  
    }  
    function ShowPlayTime()  
    {  
        if(mpl.getPlayState()==3)  
        {  
            ShowStatus(mpl.getPositionString());  
        }  
    }  
    function ShowMessage(str)  
    {  
        var msg=document.getElementById("divMsg");  
        var tn=document.createTextNode(str);  
        msg.appendChild(tn);  
        msg.appendChild(document.createElement("br"));  
    }  
    function ShowStatus(str)  
    {  
        document.getElementById("divStatus").innerHTML=str;  
    }  
      
// --></mce:script> 
</head> 
<body> 
<div id="divMpl"></div> 
<div id="divStatus"> </div> 
    <input type="button" value="清空消息" οnclick="document.getElementById('divMsg').innerHTML='';" /> 
<div id="divMsg"></div> 
</body> 
</html> 

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lihan6415151528/archive/2009/04/25/4121624.aspx

mingxunzh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web-midi-player::musical_keyboard:事件驱动JavaScript库，可在浏览器中播放MIDI
05-12
事件驱动JavaScript库，可在浏览器中播放MIDI。 查看和。 请参阅和。 阅读。 看一下。 下载。 想帮忙？ 解决。 我们正在寻找贡献者！ 在查找问题并将其分配给自己。 安装 NPM 可以使用默认注册表通过NPM安装此库： npm i web-midi-player 或者，您可以将npm设置为使用GPR来安装该库。 然后可以像这样安装依赖项： npm i @yvesgurcan/web-midi-player 无论使用哪个注册表，都可以使用ES模块语法来加载依赖项。 import MidiPlayer from 'web-midi-player'; 或使用CommonJS模块系统。 const MidiPlayer = require('web-midi-player'); CDN 或者，您可以使用script标签将此库添加到项目中。 <scr
MidiPlayer
简单代码的专栏
12-04 889
一个小程序，可以编辑和播放自定义格式的Midi音乐。由于对Midi音乐文件格式没有深入研究了解，因此文件格式是自己随便定义的，不是真正的Midi格式，好处是文件格式是纯文本的，可以随意复制编辑。对于音速和通道控制器的理解也有问题，音乐播放效果比较单薄，但是勉强能听，算是自娱自乐的消遣吧。 程序截图： 资源下载： https://download.csdn.net/download/sim...
MIDI in HTML5
gengzhen_2005的专栏
10-02 8127
随便说点啥 　　不想看废话的、查询GM标准音色表、MIDI信息状态表等资料的同僚们请直奔附录。 　　眼看2013就结束了，想着用啥来总结好呢。2013大半时间在路上，有空了小旅馆里开着网想一想，还是蛮有意思的一个东西。HTML5火爆了2013，图像、游戏、交互等等各个分支发展都很喜人。走马观花溜一遍，到了数字音乐领域，感觉有点像看春哥和曾哥对台唱歌一样从繁华喧闹的市集走到胡同脚里一片黯然收场。
分享一款 Web Music Player
yuruei2011的博客
04-19 248
分享一款  Web Music Player .                  觉得不错就点个顶！          
非常全的javascript控制MediaPlayer的属性集合
10-30
非常全的javascript控制MediaPlayer的属性集合
js网页形式MediaPlayer播放器代码
05-25
js网页形式MediaPlayer播放器代码,可调节声音大小，静音，全屏显示，方便调用
javascript控制MediaPlayer的属性集合与realplayer对象使用
04-27
非常全的javascript控制MediaPlayer的属性集合与realplayer对象使用
MediaPlayer一个小巧完全跨浏览器可访问完全可定制的媒体播放器
08-11
Media Player一个小巧，完全跨浏览器，可访问，完全可定制的媒体播放器
mediaplayer-core：Mediaplayer流和Mediaplayer阅读的核心
02-14
入门先决条件正在安装git submodule add https://github.com/thoughtsunificator/mediaplayer-core.git lib/mediaplayer-core git submodule update --init --recursive大事记姓名目标描述热键添加播放器点动切换...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1156
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1068
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 428
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 151
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
vue2生命周期和计算属性
Wang3317866410的博客
05-26 684
计算属性无法执行异步操作，计算属性的返回值不能写在异步函数中。但可以在里面写异步函数。因为我们需要观察这四个生命周期的不同，所以我们加上_data再打印一遍。当执行后可以看到data值封装到vue2中是_data的书写形式。2.计算属性是有缓存的只有依赖项改变了，计算属性的值才会改变。然后在下面新建一个index.vue（规范都用index）先添加个文件夹和文件放我们的计算属性。这里我把生命周期的换成了计算属性的。所以只需要在里面添加异步就可以了。原因：所有的生命周期都是同步的。scoped单独样式。
React-useState
weixin_46479909的博客
05-29 267
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
React后台管理（十三）-- 页面常用hook封装 --- useTable封装
weixin_43883615的博客
05-29 418
紧接上一篇，本篇主要讲和表格相关的全局hook函数封装。结构分析：（1）这个 useTable 钩子的功能是用于管理表格的高度（2）接受一个可选的 params 对象作为参数，可以包含 id 和 offset 两个属性（3）定义getHeight函数，实时计算表格区域高度，控制滚动区域下一篇讲【示例页面构建教学】。关注本栏目，将实时更新。
KeyExpirationEventMessageListener监听器的使用
最新发布
qq_47910339的博客
05-31 422
KeyExpirationEventMessageListener监听器的使用
[Nodejs]使用adm-zip和fs-extra压缩打包后的文件
ice_cream__的博客
05-29 223
现在学到了一种新方法，通过nodejs环境来实现文件、文件夹的复制粘贴，还有压缩解压缩等操作，那就是使用adm-zip、fs-extra这两个工具。
uniapp页面vue3下拉触底发送获取新数据请求实现分页功能
05-27 503
页面下拉触底获取新数据实现分页功能实现方式有两种，根据自己的业务需求来定，不同的方案适用场景不一样，有的是一整个页面下拉获取新数据，有的是部分盒子内容滚动到底部时候实现获取新数据，下面讨论一下两种方式的区别。
qwidget qmediaplayer qml mediaplayer 区别
12-06
综上所述，QWidget是用于创建窗口部件的基类，QMediaPlayer是一个用于处理多媒体文件播放的类，而QML则是一种用于创建用户界面的语言，在QML中可以使用MediaPlayer类型来实现多媒体文件播放的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值