元齐 的个人主页 注册

【改编】学作html新型代码音画（一）

导语：

修改
字体调整： 大 | 中 | 小

发表于2022年07月16号 05点 阅读 10389 评论11 点赞50 ©著作权归作者所有

       最近在亚伦影音工作室看到一种html新型代码动画，音乐可以打开，也可以关闭，有一定的互动性，可以在手机上播放。此代码音画没有flash动画的因素和痕迹，经查叫超文本标记语言，其地址格式很像一个网页地址：应该说，此代码音画有很好的发展前景。

       初次制作，虽然把《我们的生活充满阳光》音乐弄上去了，但KTV歌词和按钮还没有解决，还有待于继续学习和提高。 要了解和学习此代码音画制作的方法是：右击音画页面打开“查看源代码（V）”——再打开音画地址再一次“查看源代码（V）”就一目了然了（图片地址、音乐地址、LRC歌词、按钮图片和开关代码等都在其中）。

       具体制作这种个性化的代码音画，必须经过“二次革命”才能初步成功。在草稿箱制作过程中置换的图片和音乐等地址，必须是老小孩网站发表的地址；其中还有一些的外链，也必须去掉“http：”这个头。当然，这种依样画葫芦的制作法还有很多欠缺，不能达到理想的彼岸，需要继续探索。

http://www.oldkids.cn/upload/2020/07/26/blog_20200726221459057.jpg http://www.oldkids.cn/upload/2020/07/26/blog_20200726221459416.jpg
 
 
var lrc = `[00:02]我们的生活充满阳光 [00:04.83]《我们的生活充满阳光》 [00:07.94]电影《甜蜜的事业》插曲 [00:09.97]演唱：宋祖英 [00:12.47]幸福的花儿心中开放 [00:23.21]爱情的歌儿随风飘荡 [00:34.25]我们的心儿飞向远方 [00:45.19]憧憬那美好的革命理想 [00:55.98]啊～亲爱的人啊 [01:05.75]携手前进 携手前进 [01:13.97]我们的生活充满阳光 充满阳光 [01:35.85]并蒂的花儿竞相开放 [01:46.59]比翼的鸟儿展翅飞翔 [01:57.73]迎着那长征路上战斗的风雨 [02:08.22]为祖国贡献出青春和力量 [02:19.33]啊～亲爱的人啊 [02:28.70]携手前进 携手前进 [02:36.82]我们的生活充满阳光 充满阳光 [02:47.90]啊～亲爱的人啊 [02:57.50]携手前进 携手前进 [03:05.64]我们的生活充满阳光 充满阳光 [03:22.65]歌词编辑：潇潇 （aizuying） function $(id) {return document.getElementById(id); }//这样写以后getid方便 function getLrcArray() { var parts = lrc.split("\n"); for (let index = 0; index < parts.length; index++) { parts[index] = getLrcObj(parts[index]); } return parts; function getLrcObj(content) { var twoParts = content.split("]"); var time = twoParts[0].substr(1); var timeParts = time.split(":"); var seconds = +timeParts[1]; var min = +timeParts[0]; seconds = min * 60 + seconds; var words = twoParts[1]; return{ seconds: seconds, words: words, }; } } var lrcArray = getLrcArray(); function inputLrc() { for (let index = 0; index < lrcArray.length; index++) { var li = document.createElement("li"); li.innerText = lrcArray[index].words; $("ullrc").appendChild(li); } } inputLrc(); function setPosition() { var index = getLrcIndex(); if (index == -1) { return; } var lrc_li_height = 80, lrc_ul_height = 90; var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2; if (top < 0) { top = 0; } $("ullrc").style.marginTop = -top + "px"; var activeLi = $("ullrc").querySelector(".active"); if(activeLi){ activeLi.classList.remove("active"); } $("ullrc").children[index].classList.add("active"); } var turn = 0; function getLrcIndex(){ var time = $("MusicPlayer").currentTime + turn; for (var index = 0; index < lrcArray.length; index++) { if (lrcArray[index].seconds > time) { return index - 1; } } } $("MusicPlayer").ontimeupdate = setPosition; function rbf() { var audio = document.getElementById('MusicPlayer'); var bf=document.getElementById("bf"); audio.currentTime = 0; audio.play(); bf.innerText=""; } function bf() { var audio = document.getElementById('MusicPlayer'); var bf=document.getElementById("bf"); if (audio !== null) { if (audio.paused) { audio.play(); //audio.play();// 这个就是播放 bf.innerText=""; } else { audio.pause(); // 这个就是暂停 bf.innerText=""; } } } var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function() {document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

(注：您的设备不支持flash)

声明：以上内容仅用户个人行为，不代表本站（老小孩社区）观点，如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】
点赞50 收藏 2 推送到圈子 分享
微信扫二维码分享

等50人点赞

本文作者

元齐

加好友
评论字体大小调节： 大 | 中 | 小

精选留言

您需要登录后才能回复

登录立即注册

  • 亚伦影音工作室2022-07-16 22:12:55

     

    举报

  • 亚伦影音工作室2022-07-16 22:09:23

    元老我看了你的代码，里面少了很多，而且做好后保存成html文件，然后上传到中画公共网盘拿到html地址才能在老小孩发表。//pan.yinhuabbs.cn/view.php/7dd6a8e01739a852d19cf4547b1055a7.html 公共网盘地址：//pan.yinhuabbs.cn/upload.php 发帖代码参考我的音画。

    举报

    元齐 我试一试！谢谢！ 举报

  • 亚伦影音工作室2022-07-16 18:14:35

    等我有时间看看你全代码！

    举报

    元齐 谢谢！帮助看一看，找一找原因！ 举报

  • 亚伦影音工作室2022-07-16 16:04:41

    歌词放上去就可以了，js插件不能省去,图片地址可利用外链图片，不删前缀也可以！

    举报

    元齐 歌词放上去不显示，音乐开关也不见了，一出现外链就不让保存，总之问题多多啊！谢谢您的关注！ 举报

  • 郑鼎文2022-07-16 10:35:10

    元齐先生真能成，音画作品上水平。夫妻二人真恩爱，常在同台秀真情！

    举报

    元齐 这个音画电脑和手机都可以看，谈不上上水平。世界变化太快，跟在大师后面追赶，努力与时俱进！ 举报

  • 华龙2022-07-16 10:06:45

    是的，我明天也发一文，有不少外链也是用图片上传解决，就是一个问题不能复制！

    举报

    元齐 没有办法，在夹缝中求生存，只能将就一点了。 举报

  • 李智美娜2022-07-16 09:46:55

    拜读欣赏老师的博文！问好老师！

    举报

    元齐 谢谢老师一如既往的关注和点赞！拜读你的自传，犹如看小说一样！ 举报

  • 华龙2022-07-16 09:46:07

    请问元齐老师，你的网址是白底是用纸还是什么！现在网址都不能出现！

    举报

    元齐 网站不让外链，我是把外链地址制作成图片，以便博友了解这个奇特的音画地址。 举报

  • 占峰2022-07-16 06:42:41

    老师钻研技术，令人钦佩！

    举报

  • 彩云归2022-07-16 06:21:50

    讲述中直接使用html文件中的代码不完全兼容。如按钮控制等。

    举报

    元齐 为什么LRC歌词上不去，为什么按钮不显示，可能是“直接使用html文件中的代码不完全兼容”，这还有待于进一步学习、思考、探索和实践，谢谢老师的指点！ 举报

  • 亚伦影音工作室2022-07-16 06:04:00

    元齐的作品不错，老歌听起来得劲！

    举报

    元齐 你是音画大师，谢谢你的指点和鼓励！ 举报

请选择你想添加的收藏夹

新建收藏夹

收藏夹名称

©2017 老小孩网站版权所有 ｜ 沪ICP备08012383号    举报电话：021-64323922
标题：
音频（选填）：
导语（选填）：
×
导语：
×