가사 동기화를 달성하기 위해 오디오 태그를 사용하는 HTML5의 효과에 대한 자세한 소개

黄舟
풀어 주다: 2018-05-22 16:40:43
원래의
6761명이 탐색했습니다.

HTML5의 가장 강력한 점은 미디어 파일 처리입니다. 예를 들어 간단한 vedio 태그를 사용하면 동영상 재생을 구현할 수 있습니다. 마찬가지로 HTML5에는 audio 파일을 처리하는 해당 태그, 즉 audio 태그가 있습니다. 이 기사를 통해 오디오 태그를 사용하여 가사 동기화를 달성하는 HTML5의 효과를 소개하겠습니다. 관심있는 친구들이 함께 배울 수 있습니다. HTML5의 가장 강력한 점은 미디어 파일 처리입니다. 예를 들어 간단한 vedio 태그를 사용하여 비디오를 재생할 수 있습니다. 마찬가지로 HTML5에도 오디오 파일을 처리하기 위한 해당 태그가 있는데, 바로 오디오 태그
HTML5가 나온 지 꽤 됐는데, 그 안에 들어 있는 오디오 태그는 딱 한 번만 사용됐고, 당연히 그냥 이 태그를 페이지에 삽입하세요. 이번에는 친구가 몇 페이지를 만들고 오디오 태그를 사용하여 연습하는 것을 도와주었습니다.
먼저 페이지에 오디오 태그를 삽입해야 합니다. 여기서는 loop='loop'를 설정하지 않는 것이 가장 좋습니다. 이 속성 루프 를 설정하는 데 사용됩니다. 나중에 재생되기 때문에 ended 속성을 사용해야 할 때 loop가 loop로 설정되면ended 속성은 항상 false가 됩니다.
autoplay='autoplay'는 페이지가 로드된 후 음악이 자동으로 재생되도록 설정합니다. preload 속성과 autoplay 속성은 동일한 효과를 갖습니다. autoplay 속성이 태그에 나타나면 preload 속성은 다음과 같습니다. 무시되었습니다.
controls='controls'는 음악 표시를 위한 컨트롤 막대를 설정합니다.

XML/HTML Code复制内容到剪贴板
<audio src="music/Yesterday Once More.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto">
您的浏览器不支持audio属性,请更换浏览器在进行浏览。    
</audio>
로그인 후 복사

이 태그가 있으면 축하합니다. 이제 귀하의 페이지에서 음악을 재생할 수 있습니다. 하지만 이렇게 하면 페이지가 너무 단조로워질 수 있기 때문에 페이지에 가사가 동시에 표시되고 재생할 음악도 선택할 수 있도록 페이지에 몇 가지 항목을 추가했습니다. 따라서 이 효과를 얻으려면 먼저 lrc 형식의 일부 가사 파일을 다운로드한 다음 음악 형식을 지정해야 합니다. 초기 음악 파일은 이렇기 때문에

가사 동기화를 달성하기 위해 오디오 태그를 사용하는 HTML5의 효과에 대한 자세한 소개


각 가사를 2비트 배열에 삽입하고 포맷해야 합니다. 그 후, 가사는 다음 형식이 됩니다
가사 서식 지정을 위한 코드는 여기에 첨부되어 있습니다

가사 동기화를 달성하기 위해 오디오 태그를 사용하는 HTML5의 효과에 대한 자세한 소개


XML/HTML Code复制内容到剪贴板
//歌词同步部分    
function parseLyric(text) {    
//将文本分隔成一行一行,存入数组    
var lines = text.split(&#39;\n&#39;),    
//用于匹配时间的正则表达式,匹配的结果类似[xx:xx.xx]    
pattern = /\[\d{2}:\d{2}.\d{2}\]/g,    
//保存最终结果的数组    
result = [];    
//去掉不含时间的行    
while (!pattern.test(lines[0])) {    
lineslines = lines.slice(1);    
};    
//上面用&#39;\n&#39;生成生成数组时,结果中最后一个为空元素,这里将去掉    
lines[lines.length - 1].length === 0 && lines.pop();    
lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {    
//提取出时间[xx:xx.xx]    
var time = v.match(pattern),    
//提取歌词    
vvalue = v.replace(pattern, &#39;&#39;);    
//因为一行里面可能有多个时间,所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式,需要进一步分隔    
time.forEach(function(v1, i1, a1) {    
//去掉时间里的中括号得到xx:xx.xx    
var t = v1.slice(1, -1).split(&#39;:&#39;);    
//将结果压入最终数组    
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);    
});    
});    
//最后将结果数组中的元素按时间大小排序,以便保存之后正常显示歌词    
result.sort(function(a, b) {    
return a[0] - b[0];    
});    
return result;    
}
로그인 후 복사

이 시점에서 할 수 있습니다. 각 음악의 가사를 사용하기 쉽습니다. 음악이 정상적으로 전환될 수 있도록 가사를 가져와서 페이지에 동시에 표시하는 기능이 필요합니다. 코드는 아래에 첨부되어 있습니다.

XML/HTML Code复制内容到剪贴板
function fn(sgname){    
$.get(&#39;music/&#39;+sgname+&#39;.lrc&#39;,function(data){    
var str=parseLyric(data);    
for(var i=0,li;i<str.length;i++){    
li=$(&#39;<li>&#39;+str[i][1]+&#39;</li>&#39;);    
$(&#39;#gc ul&#39;).append(li);    
}    
$(&#39;#aud&#39;)[0].ontimeupdate=function(){//视屏 音频当前的播放位置发生改变时触发    
for (var i = 0, l = str.length; i < l; i++) {    
if (this.currentTime /*当前播放的时间*/ > str[i][0]) {    
//显示到页面    
$(&#39;#gc ul&#39;).css(&#39;top&#39;,-i*40+200+&#39;px&#39;); //让歌词向上移动    
$(&#39;#gc ul li&#39;).css(&#39;color&#39;,&#39;#fff&#39;);    
$(&#39;#gc ul li:nth-child(&#39;+(i+1)+&#39;)&#39;).css(&#39;color&#39;,&#39;red&#39;); //高亮显示当前播放的哪一句歌词    
}    
}    
if(this.ended){ //判断当前播放的音乐是否播放完毕    
var songslen=$(&#39;.songs_list li&#39;).length;    
for(var i= 0,val;i<songslen;i++){    
val=$(&#39;.songs_list li:nth-child(&#39;+(i+1)+&#39;)&#39;).text();    
if(val==sgname){    
i=(i==(songslen-1))?1:i+2;    
sgname=$(&#39;.songs_list li:nth-child(&#39;+i+&#39;)&#39;).text(); //音乐播放完毕之后切换下一首音乐    
$(&#39;#gc ul&#39;).empty(); //清空歌词    
$(&#39;#aud&#39;).attr(&#39;src&#39;,&#39;music/&#39;+sgname+&#39;.mp3&#39;);    
fn(sgname);    
return;    
}    
}    
}    
};    
});    
} fn($(&#39;.songs_list li:nth-child(1)&#39;).text());
로그인 후 복사

이제 여기에서 음악 가사가 페이지에 정상적으로 동시에 표시될 수 있습니다. 하지만 아직 한 가지 빠진 것이 있는데, 바로 음악 목록입니다. 이 목록에 있는 음악을 클릭하여 음악을 재생할 수 있기를 바랍니다.
HTML 코드

XML/HTML Code复制内容到剪贴板
<p class="songs_cnt">
<ul class="songs_list">
<li>Yesterday Once More</li>
<li>You Are Beautiful</li>
</ul>
<button class="sel_song">点<br/><br/>我</button>
</p>
<p id="gc">
<ul></ul>
</p>
로그인 후 복사

css 코드

XML/HTML Code复制内容到剪贴板
#gc{    
width: 400px;    
height: 400px;    
background: transparent;    
margin: 100px auto;    
color: #fff;    
font-size: 18px;    
overflow: hidden;    
position: relative;    
}    
#gc ul{    
position: absolute;    
top: 200px;    
}    
#gc ul li{    
text-align: center;    
height: 40px;    
line-height: 40px;    
}    
.songs_cnt{    
float: left;    
margin-top: 200px;    
position: relative;    
}    
.songs_list{    
background-color: rgba(0,0,0,.2);    
border-radius: 5px;    
float: left;    
width: 250px;    
padding: 15px;    
margin-left: -280px;    
}    
.songs_list li{    
height: 40px;    
line-height: 40px;    
font-size: 16px;    
color: rgba(255,255,255,.8);    
cursor: pointer;    
}    
.songs_list li:hover{    
font-size: 20px;    
color: rgba(255,23,140,.6);    
}    
.sel_song{    
position: absolute;    
top: 50%;    
width: 40px;    
height: 80px;    
margin-top: -40px;    
font-size: 16px;    
text-align: center;    
background-color: transparent;    
border: 1px solid #2DCB70;    
font-weight: bold;    
cursor: pointer;    
border-radius: 3px;    
font-family: sans-serif;    
transition:all 2s;    
-moz-transition:all 2s;    
-webkit-transition:all 2s;    
-o-transition:all 2s;    
}    
.sel_song:hover{    
color: #fff;    
background-color: #2DCB70;    
}    
.songs_list li.active{    
color: #f00;    
}
로그인 후 복사

jscode

으아아아

위 내용은 가사 동기화를 달성하기 위해 오디오 태그를 사용하는 HTML5의 효과에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿