php 歌词同步,HTML5实践之歌词同步播放器的示例代码分享

歌曲播放我们会发现他的兼容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!HTML5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个HTML兼容的播放器！向下兼容IE6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！001

002

003

004

005

歌词同步播放器-powered by widuu xiaowei

006

007

008

009

010

011

012

013

014* { margin:0; padding:0; }

015ul, ol, dl { list-style:none; }

016.content li.hover{ color:red; }

017.content{ width:402px; height:200px; background:#ccc; overflow:hidden; padding:10px;}

018

019

020//

021$(document).ready(function(){

022 $("#jquery_jplayer_1").jPlayer({

023 ready: function (event) {

024 $(this).jPlayer("setMedia", {

025 mp3:"yangcong.mp3" //mp3的播放地址

026 }).jPlayer("play");

027 },

028 timeupdate: function(event) {

029 if(event.jPlayer.status.currentTime==0){

030 time = "";

031 }else {

032 time = event.jPlayer.status.currentTime;

033 }

034

035 },

036 play: function(event) {

037 //点击开始方法调用lrc。start歌词方法 返回时间time

038

039 if(event.jPlayer.status.currentTime==0){

040 $("#jquery_jplayer_1").jPlayer("pause",1);

041 }

042

043 if($('#lrc_content').val()!==""){

044 $.lrc.start($('#lrc_content').val(), function() {

045 return time;

046 });

047 }else{

048 $(".content").html("没有字幕");

049 }

050 },

051 repeat: function(event) {

052 if(event.jPlayer.options.loop) {

053 $(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {

054 $(this).jPlayer("play");

055 });

056 } else {

057 $(this).unbind(".jPlayerRepeat");

058 }

059 },

060 swfPath: "/js", //存放jplayer.swf的决定路径

061 solution:"html, flash", //支持的页面

062 supplied: "mp3", //支持的音频的格式

063 wmode: "window"

064

065 });

066 $("#lrc_content").hide();

067});

068//]]>

069

070

071

072

073[ar:测试用 ]

074[00:03.00]洋葱

075[00:06.00]演唱：平安

076[00:09.00]

077[00:11.38]如果你眼神能够为我片刻的降临

078[00:21.23]如果你能听到心碎的声音

079[00:28.88]盘底的洋葱像我永远是配角戏

080[00:35.74]偷偷的看着你偷偷的隐藏着自己

081[00:43.48]

082[00:44.90]如果你愿意一层一层

083[00:48.46]一层的剥开我的心

084[00:52.66]你会发现你会讶异

085[00:56.40]你是我最压抑最深处的秘密

086[01:00.26]如果你愿意一层一层

087[01:03.69]一层的剥开我的心

088[01:07.76]你会鼻酸你会流泪

089[01:11.60]只要你能听到我看到我的全心全意

090[01:18.30]

091[01:19.11]如果你愿意一层一层

092[01:22.57]一层的剥开我的心

093[01:26.66]你会发现你会讶异

094[01:30.41]你是我最压抑最深处的秘密

095[01:34.48]如果你愿意一层一层

096[01:37.58]一层的剥开我的心

097[01:41.51]你会鼻酸你会流泪

098[01:45.15]只要你能听到我看到我的全心全意

099[01:53.55]

100[01:55.65]你会鼻酸你会流泪

101[01:59.84]只要你能听到我看到我的全心全意

102[02:12.57]

103

104

105

106

107

108

109

110

111

112

113

114

play

115

pause

116

stop

117

mute

118

unmute

119

max volume

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

repeat

135

repeat off

136

137

138

139

140

141

mp3player powered by xiaowei

142

143

144

145 Update Required

146 To play the media you will need to either update your browser to a recent version or update your

Flash plugin.

147

148

149

150

151 点击开始播放……

152

153

154

155