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 형식의 일부 가사 파일을 다운로드한 다음 음악 형식을 지정해야 합니다. 초기 음악 파일은 이렇기 때문에
각 가사를 2비트 배열에 삽입하고 포맷해야 합니다. 그 후, 가사는 다음 형식이 됩니다
가사 서식 지정을 위한 코드는 여기에 첨부되어 있습니다
XML/HTML Code复制内容到剪贴板 //歌词同步部分 function parseLyric(text) { //将文本分隔成一行一行,存入数组 var lines = text.split('\n'), //用于匹配时间的正则表达式,匹配的结果类似[xx:xx.xx] pattern = /\[\d{2}:\d{2}.\d{2}\]/g, //保存最终结果的数组 result = []; //去掉不含时间的行 while (!pattern.test(lines[0])) { lineslines = lines.slice(1); }; //上面用'\n'生成生成数组时,结果中最后一个为空元素,这里将去掉 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, ''); //因为一行里面可能有多个时间,所以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(':'); //将结果压入最终数组 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('music/'+sgname+'.lrc',function(data){ var str=parseLyric(data); for(var i=0,li;i<str.length;i++){ li=$('<li>'+str[i][1]+'</li>'); $('#gc ul').append(li); } $('#aud')[0].ontimeupdate=function(){//视屏 音频当前的播放位置发生改变时触发 for (var i = 0, l = str.length; i < l; i++) { if (this.currentTime /*当前播放的时间*/ > str[i][0]) { //显示到页面 $('#gc ul').css('top',-i*40+200+'px'); //让歌词向上移动 $('#gc ul li').css('color','#fff'); $('#gc ul li:nth-child('+(i+1)+')').css('color','red'); //高亮显示当前播放的哪一句歌词 } } if(this.ended){ //判断当前播放的音乐是否播放完毕 var songslen=$('.songs_list li').length; for(var i= 0,val;i<songslen;i++){ val=$('.songs_list li:nth-child('+(i+1)+')').text(); if(val==sgname){ i=(i==(songslen-1))?1:i+2; sgname=$('.songs_list li:nth-child('+i+')').text(); //音乐播放完毕之后切换下一首音乐 $('#gc ul').empty(); //清空歌词 $('#aud').attr('src','music/'+sgname+'.mp3'); fn(sgname); return; } } } }; }); } fn($('.songs_list li:nth-child(1)').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 중국어 웹사이트의 기타 관련 기사를 참조하세요!