思念（蒙语版）

马黑黑 发表于 2022-11-11 07:10

马黑黑 发表于 2022-11-11 07:33

本帖最后由马黑黑于 2022-11-11 07:38 编辑

本帖主要是试一下蒙古语歌词，做帖过程中发现一些问题：本论坛使用gbk编码，它对蒙古语不是非常支持，尤其是在在特殊处理的时候，若编码为 UTF-8，则会完美支持。

下面解释几个问题：

① 关于歌词同步

蒙古语不好编辑，通过伪元素实现的逐字同步模拟在gbk编码的论坛里也不好处理，所以去掉逐字同步模拟，只同步显示整句歌词。

② 关于八思巴文

帖子左边部分的符号是八思巴文字母，与歌词蒙语不是一个东东（但貌似有一丁点联系）。八思巴文是元朝时期，忽必烈为了统一文字，令元朝帝师、学者八思巴编制的文字，意欲取代汉字，但彻底失败，根本无法推广，仅在官方文件中短暂使用过，八思巴文故而是一门历史语言，像错版的钱币一样额外珍贵（保守估算，左边的符号每一个都约值10.65万刀）。

元，是一个绕不开的历史，八思巴文承载着诸多不堪。

③ 关于播放进度条

进度条使用HTML5标准的进度条标签 progress，它非常简单，最少只需一个属性便能做进度条（将在下楼演示下面的代码）：

<progress max="100"></progress>

max设置为100必须，进度量通常都是百分制的好。进度条还应该有 value 值，比如 value="10"，表示完成进度为百分之十。

④ 左侧符号布局的实现

用 span 标签装载每一个字符。首先，在CSS设定一下基本的 span 样式：

#papa > span {
   position: absolute;
   left: -240px;
   width: 100%;
   height: 100%;
   font: bold 1em serif;
   display: grid;
   place-items: center;
}

其次，用 JS 生成 span 标签，细化 span 标签的样式，同时获取特殊符号，再追加到 papa 父框：

   (function() {
            let total = 65, rr = 200;
            Array.from({length: total}).forEach((item,key) => {
                     item = document.createElement('span');
                     item.innerText = String.fromCharCode(43072 + Math.floor(Math.random() * 65));
                     item.style.cssText += `
                           color: hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.5 + 0.3});
                           font-size: ${Math.ceil(Math.random() * 20) + 20}px;
                           transform: rotate(${Math.random() * 180}deg) translateY(${rr/total * key}px);
                     `;
                     papa.appendChild(item);
            });
   })();

马黑黑 发表于 2022-11-11 07:39

进度条演示<div><br></div><div><br></div><progress max="100"></progress>

马黑黑 发表于 2022-11-11 07:40

上楼代码仅为短短一句：

<progress max="100"></progress>

梦油发表于 2022-11-11 10:16

黑黑朋友早晨好！画面上的蒙文是“久巴-思念”吗？

起个网名好难 发表于 2022-11-11 10:17

本帖最后由起个网名好难于 2022-11-11 10:20 编辑 <br /><br />蒙古语不好编辑，通过伪元素实现的逐字同步模拟在gbk编码的论坛里也不好处理，所以去掉逐字同步模拟，只同步显示整句歌词。
我也来试一试
<style type="text/css">
.lyricDisp{filter:drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);font-family:微软雅黑;transition:.3s all ease;font-size:3em;}.lyricDisp:nth-child(1){color:gray;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}#LRCShow{position:absolute;left:15%;bottom:10px;width:80%;height:100px;margin:16px auto
            position:relative;}#rdisk{position:absolute;left:80px;bottom:10px;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;}@keyframes circleSmall2{0%{transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);}100%{transform:rotateX(30deg) rotateY(-45deg) rotate(360deg);}}
   #hWindow       {
            width:960px;
            height:140px;
            background-color:skyblue;
            border:thick brown ridge;
            position:relative;
            margin:100px 16px 32px -180px;
            overflow:hidden;
            border-radius:24px;
   }
</style>

<div id="hWindow">
<div id="rdisk" style="position:absolute;left:10px;bottom:10px;">☀</div>
<div id="LRCShow" style="position:absolute;left:15%;bottom:10px;" >
   <div class="lyricDisp"></div><div class="lyricDisp"></div>
</div>
</div>

<textarea id="lrc_content" style="visibility:hidden;">
作词 : 民间
作曲 : 民间
ཚིག་དམང་ཁྲོད་།
གདངས་དམང་ཁྲོད།
གཞས་མ་གཅོད་པ།
ལ་གཅིག་རྒྱབ་ལ་གཉིས་རྒྱབ་ལ་གསུམ་རྒྱབ།
ལ་དང་པོ་རྒྱབ་དུས་ངའི་ཨ་མ་དྲན།
ངའི་ཨ་མ་མ་དྲན་རང་དྲན་ཡིན།
ཟས་དང་པོ་གཏེར་མཁན་ཨ་མ་རེད།
ལ་གཅིག་རྒྱབ་ལ་གཉིས་རྒྱབ་ལ་གསུམ་རྒྱབ།
ལ་གཉིས་པ་རྒྱབ་དུས་ངའི་ཨ་ཕ་དྲན།
ངའི་ཨ་ཕ་མ་དྲན་རང་དྲན་རེད།
གོས་དང་པོས་གཡོག་མཁན་ཨ་ཕ་ཡིན།
ལ་གཅིག་རྒྱབ་ལ་གཉིས་རྒྱབ་ལ་གསུམ་རྒྱབ།
ལ་གསུམ་པ་རྒྱབ་དུས་ངའི་གྲོགས་མོ་དྲན།
ངའི་གྲོགས་མོ་མ་དྲན་རང་དྲན་རེད།
སྡུག་སྔོན་མོ་ཆུ་ལ་མཉམ་མཐུང་རེད།
ལ་གཅིག་རྒྱབ་ལ་གཉིས་རྒྱབ་ལ་གསུམ་རྒྱབ།
ལ་བཞི་པ་རྒྱབ་དུས་ངའི་ཕ་ཡུལ་དྲན།
ངས་ཕ་ཡུལ་མ་དྲན་རང་དྲན་རེད།
ང་སྐྱེ་ས་ཚར་ས་ཕ་ཡུལ་ཡིན།
བོད་ཁ་བ་ཅན་གྱི་གནས་མཆོག་དེ།
སྟག་ཤར་པ་ང་ཡི་སྐྱེ་ས་ཡིན་སྨན་བུ་མོ་ང་ཡི་ཚར་ས་ཡིན།
སྟག་ཤར་པ་ང་ཡི་སྐྱེ་ས་ཡིན་སྨན་བུ་མོ་ང་ཡི་ཚར་ས་ཡིན།
</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div');this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=true;this.mObj.autoplay=true;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}
</script>

<script type="text/javascript">
   var opts = {
                     //    下面4个参数是必须的！
                     lrcTxtID:'lrc_content',
                     lrcShowID:"LRCShow",
                     audioURL:"https://music.163.com/song/media/outer/url?id=1868810905.mp3",
                     audioCtrl:'rdisk'
   };
   new lrcPlayer2(opts);
</script>

起个网名好难 发表于 2022-11-11 10:23

和一行、两行没关系，只是随手抓一个逐字的来试验。

醉美水芙蓉 发表于 2022-11-11 10:50

加林森 发表于 2022-11-11 11:40

好听好看。制作漂亮。赞！{:4_199:}

马黑黑 发表于 2022-11-11 12:28

加林森发表于 2022-11-11 11:40
好听好看。制作漂亮。赞！

你对草原有感情

马黑黑 发表于 2022-11-11 12:31

梦油发表于 2022-11-11 10:16
黑黑朋友早晨好！画面上的蒙文是“久巴-思念”吗？

久巴是歌手，思念是歌名

马黑黑 发表于 2022-11-11 12:32

醉美水芙蓉发表于 2022-11-11 10:50
问候老师！欣赏黑黑老师佳作！

几天不见，一切可安好？

醉美水芙蓉 发表于 2022-11-11 12:42

马黑黑 发表于 2022-11-11 12:53

醉美水芙蓉发表于 2022-11-11 12:42
家中有事，所以好多天都没有上网，谢谢黑黑老师关心！

生活就是酱紫，总有些事情要处理

加林森 发表于 2022-11-11 13:10

马黑黑发表于 2022-11-11 12:28
你对草原有感情

是啊。

梦油发表于 2022-11-11 13:17

马黑黑发表于 2022-11-11 12:31
久巴是歌手，思念是歌名

谢谢你，知道了。

马黑黑 发表于 2022-11-11 19:15

梦油发表于 2022-11-11 13:17
谢谢你，知道了。

{:4_190:}

马黑黑 发表于 2022-11-11 19:15

加林森发表于 2022-11-11 13:10
是啊。

挺好的

梦缘发表于 2022-11-11 19:32

感谢老师的精彩分享，好看，欣赏问好！{:4_187:}

马黑黑 发表于 2022-11-11 19:40

梦缘发表于 2022-11-11 19:32
感谢老师的精彩分享，好看，欣赏问好！

{:5_108:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

思念（蒙语版）