在ＤＺ论坛在在线播放midi音乐

1
<script src="//cdn.bootcss.com/midi.js/0.3.0/midi.js"></script>
 

1
<script src="//cdn.bootcss.com/midi.js/0.3.0/midi.min.js"></script>
　　

1
<link href="//cdn.bootcss.com/midi.js/0.3.0/MIDIPlayer.css" rel="stylesheet">
　　

 

然后是在页面中进行播放。

1
<div ><a href="#" onClick="MIDIjs.play('{1}');"> 播放mid音乐 </a> | <a href="#" onClick="MIDIjs.stop();">停止播放</a></div>

　　上面是需要的代码。

一、在模板的页面部份尾部增加midi.js的引用

<script type="text/javascript" src="/midi.js"></script>

　

二、我看ＣＳＳ文件不大，将他复制到我的电脑中的ＣＳＳ中去。但结果竟然会改变一些参数，很郁闷

 

三、增加编辑器按钮。

在界面－编辑器－代码

 

图标没显示，点详情。

在详情中一定要选择能使用的角色名。

 

 

三、但这样写有问题，真正的midi.js案例地址：

http://www.midijs.net/

 

四、弄完后，一定要在这个版 块使用在线播放媒体的功能。然后才能在MID中使用

 在全局－上传附件设置中进行设置

五，要注意官方示例有个h

 <a href="#example" onClick="MIDIjs.play('{1}');">播放mid</a> <a href="#" onClick="MIDIjs.stop();">停止播放</a> 

　　这个#example是定位的意思。

 

六，在编辑器中的代码：

<p name="example">

<div class="player">
 <p>
 <a href="#example" onClick="MIDIjs.play('{1}');">播放mid</a> <a href="#" onClick="MIDIjs.stop();">停止播放</a> </p>
<div style="font-size: 71%;font-size: 71%"> MIDI.js status: <span id="MIDIjs.message" style="color: green">Initializing ...</span>
  <div> MIDI.js audio time (s): <span id="MIDIjs.audio_time" style="color: green">-</span></div>
</div>
</div>

　　

七，在页面模板中引用

<script type='text/javascript'>
  var message_span = document.getElementById('MIDIjs.message');
  message_span.innerHTML = MIDIjs.get_audio_status();

  MIDIjs.message_callback = display_status;
  function display_status(message) {
     message_span.innerHTML = message;
  };

  var time_span = document.getElementById('MIDIjs.audio_time');
  MIDIjs.player_callback = display_time;
  function display_time(player_event) {
     time_span.innerHTML = player_event.time;
  };
</script>
<script type="text/javascript" src="/midi.js"></script>

　八、在实际的上面引用了出了二个问题，一是JS的引用要引用远程的，我在header_common中引用的。

    <!-- <script type='text/javascript' src='http://sousafun.intern.fun.de/midijs/lib/midi.js'></script> -->
<script type='text/javascript' src='http://www.midijs.net/lib/midi.js'></script>

　　然后那个JS代码我然后是在viewtheard底部引用

另一个问题是，怎么都出不了状态，原来是在编辑器代码中，自动生成了空格，我一个一个删掉，然后轻轻一个空格搞定，

不能在文本中弄好复制。

<div class="player111"> <p> <a href="javascript:void(0)" onClick="MIDIjs.play('{1}');">播放mid</a>     <a href="javascript:void(0)" onClick="MIDIjs.stop();">停止播放</a> </p>
<div style="font-size: 71%;font-size: 71%"> MIDI.js status: <span id="MIDIjs.message" style="color: green">Initializing ...</span>
  <div> MIDI.js audio time (s): <span id="MIDIjs.audio_time" style="color: green">-</span></div>
</div>
</div>