LED字幕演唱会必备

zbmxqddn · 发表于 2026-6-1 12:28

本帖最后由 zbmxqddn 于 2026-6-2 08:26 编辑

声明：此功能借助AI生成
之前看演唱会的时候，想在手机上打字，但是下载的软件基本都要钱，用python写一下免费的，用记事本或者文字编辑软件将代码贴进去，保存成led.html文件，用手机浏览器打开就能用了。
功能比较简单，但应该够用了
1、可以把输入的文案保存下来，下次调用
2、可以添加一些表情，预置了几个配色方案，也可以手动调整文字和背景颜色
3、可以调整文字大小
4、可以调整文字滚动速度，可以关闭滚动
5、内置了几种跑马灯效果，可以打开和关闭跑马灯
6、可以一键全屏，点击全屏后就全屏了，没有浏览器地址栏啥的了，再点一下可以呼出和关闭功能入口

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>LED</title>
<style>
* {margin:0;padding:0;box-sizing:border-box;}
body {background:#000;color:#fff;font-family:sans-serif;}

.controls {
  padding:12px;background:#111;
  display:flex;flex-direction:column;gap:8px;
  transition: opacity 0.3s ease;
}
.row {display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
input, button, select {padding:8px;border:none;border-radius:6px;font-size:15px;min-height:42px;}
input[type="text"]{flex:1;min-width:200px;font-size:22px;}
input[type="range"]{flex:1;}
button{font-weight:bold;cursor:pointer;}

.btn-scroll-on{background:#ff4081;color:#fff;}
.btn-scroll-off{background:#666;color:#fff;}
.btn-marquee-on{background:#00eaff;color:#000;}
.btn-marquee-off{background:#444;color:#fff;}
.btn-full{background:#27ae60;color:#fff;}
.style-btn{background:#333;color:#fff;border:1px solid #666;}
.style-btn.active{background:#00eaff;color:#000;border-color:#fff;}
.save-btn{background:#2980b9;color:#fff;}
.del-btn{background:#e74c3c;color:#fff;}

.color-pre{width:42px;height:42px;padding:0;border:2px solid #fff;}
.emoji-btn{font-size:20px;padding:0 5px;}
.label{font-size:15px;min-width:70px;}
.val{font-size:15px;min-width:40px;}

#led-box {
  width:100vw;
  height:calc(100vh - 390px);
  background:#000;
  overflow:hidden;
  position:relative;
  cursor:pointer;
}

.text-container {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  padding:6px 14px;
  font-weight:bold;
  white-space:nowrap;
  z-index:2;
  /* 强制渲染，防止华为WebView字体被覆盖 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.marquee-base {
  position:absolute; top:0; left:0; right:0; bottom:0;
  border:3px solid transparent; border-radius:6px;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  z-index:1;
}

.marquee-rainbow {
  background:linear-gradient(90deg,#ff2400,#ffd800,#00e1ff,#9d00ff,#ff2400) border-box;
  background-size:500% 100%; animation:flow 2.2s linear infinite;
}
.marquee-gold {
  background:linear-gradient(90deg,#fff700,#ffc800,#fff700) border-box;
  background-size:300% 100%; animation:flow 1.8s linear infinite;
}
.marquee-neon {
  background:linear-gradient(90deg,#00ffff,#ff00ff,#00ffff) border-box;
  background-size:300% 100%; animation:pingpong 2s ease-in-out infinite;
}
.marquee-red {
  background:linear-gradient(90deg,#ff0000,#ff8800,#ff0000) border-box;
  background-size:200% 100%; animation:breath 2s ease-in-out infinite;
}
.marquee-fast {
  background:linear-gradient(90deg,#ffffff,#88ffff,#ffffff) border-box;
  background-size:400% 100%; animation:flow 0.9s linear infinite;
}

@keyframes flow {0%{background-position:0% 50%;}100%{background-position:500% 50%;}}
@keyframes pingpong {0%{background-position:0% 50%;}50%{background-position:300% 50%;}100%{background-position:0% 50%;}}
@keyframes breath {0%{opacity:0.6;}50%{opacity:1;}100%{opacity:0.6;}}

:fullscreen .controls{position:fixed;top:0;left:0;right:0;z-index:999;opacity:1;}
:fullscreen .controls.hide{opacity:0;pointer-events:none;}
:fullscreen #led-box{height:100vh !important;}
</style>
</head>
<body>

<div class="controls" id="controlPanel">
  <div class="row">
    <select id="textPreset">
      <option value="">选择文案</option>
    </select>
    <button class="save-btn">保存</button>
    <button class="del-btn">删除</button>

    <!-- 专门适配华为/鸿蒙的字体列表 -->
    <select id="fontFamily">
      <option value="sans-serif">系统默认（无衬线）</option>
      <option value="HarmonyOS Sans, sans-serif">鸿蒙黑体（HarmonyOS）</option>
      <option value="Noto Sans SC, sans-serif">思源黑体（通用）</option>
      <option value="serif">衬线字体（宋体类）</option>
      <option value="PingFang SC, sans-serif">苹方（苹果/华为回退）</option>
    </select>
  </div>

  <div class="row">
    <button class="emoji-btn">&#10084;&#65039;</button>
    <button class="emoji-btn">&#129505;</button>
    <button class="emoji-btn">&#128155;</button>
    <button class="emoji-btn">&#128154;</button>
    <button class="emoji-btn">&#128153;</button>
    <button class="emoji-btn">&#128156;</button>
    <button class="emoji-btn">&#128150;</button>
    <button class="emoji-btn">&#128157;</button>
    <button class="emoji-btn">&#10024;</button>
    <button class="emoji-btn">&#127775;</button>
    <button class="emoji-btn">&#128171;</button>
    <button class="emoji-btn">&#128293;</button>
    <button class="emoji-btn">&#9889;</button>
    <button class="emoji-btn">&#127908;</button>
    <button class="emoji-btn">&#127925;</button>
    <button class="emoji-btn">&#127926;</button>
    <button class="emoji-btn">&#127881;</button>
    <button class="emoji-btn">&#127882;</button>
    <button class="emoji-btn">&#128079;</button>
    <button class="emoji-btn">&#128588;</button>
    <button class="emoji-btn">&#128075;</button>
    <button class="emoji-btn">&#11088;</button>
    <button class="emoji-btn">&#127776;</button>
    <button class="emoji-btn">&#127756;</button>
  </div>

  <div class="row">
    <input type="text" id="input-text" value="Hello Concert">
  </div>

  <div class="row">
    <button class="color-pre" style="background:#ffff00"></button>
    <button class="color-pre" style="background:#ff0000"></button>
    <button class="color-pre" style="background:#00ff00"></button>
    <button class="color-pre" style="background:#00ffff"></button>
    <button class="color-pre" style="background:#ff00ff"></button>
    <input type="color" id="color-text" value="#ffff00">
    <input type="color" id="color-bg" value="#000">
  </div>

  <div class="row">
    <span class="label">文字大小:</span>
    <input type="range" id="range-size" min="30" max="2000" value="100">
    <span class="val" id="size-val">100px</span>
  </div>

  <div class="row">
    <span class="label">滚动速度:</span>
    <input type="range" id="range-speed" min="1" max="30" value="10">
    <span class="val" id="speed-val">10</span>
  </div>

  <div class="row">
    <button class="style-btn active">彩虹</button>
    <button class="style-btn">金色</button>
    <button class="style-btn">尼彩</button>
    <button class="style-btn">红色</button>
    <button class="style-btn">快速</button>
    <button id="btn-marquee" class="btn-marquee-off">跑马灯开关</button>
    <button id="btn-scroll" class="btn-scroll-on">滚动开关</button>
    <button class="btn-full">全屏</button>
  </div>
</div>

<div id="led-box"></div>

<script>
let ani = null;
let scrollOn = true;
let lightOn = false;
let currentStyle = 'rainbow';
let currentPos = window.innerWidth;
let currentFont = 'sans-serif';
const controlPanel = document.getElementById('controlPanel');
const ledBox = document.getElementById('led-box');
const textPreset = document.getElementById('textPreset');
const fontFamilySelect = document.getElementById('fontFamily');
let textList = JSON.parse(localStorage.getItem('ledTextList')) || [];

// 字体切换（华为专用）
fontFamilySelect.addEventListener('change', function(){
  currentFont = this.value;
  updateLED();
});

function initPreset() {
  textPreset.innerHTML = '<option value="">文案选择</option>';
  textList.forEach((item, idx) => {
    const opt = document.createElement('option');
    opt.value = idx;
    opt.textContent = item;
    textPreset.appendChild(opt);
  });
}
initPreset();

textPreset.addEventListener('change', function(){
  if(this.value) {
    document.getElementById('input-text').value = textList[this.value];
    updateLED();
  }
});

function saveText(){
  const t = document.getElementById('input-text').value.trim();
  if(t && !textList.includes(t)) {
    textList.push(t);
    localStorage.setItem('ledTextList', JSON.stringify(textList));
    initPreset();
  }
}

function delText(){
  if(textPreset.value) {
    textList.splice(textPreset.value,1);
    localStorage.setItem('ledTextList', JSON.stringify(textList));
    initPreset();
  }
}

ledBox.addEventListener('click', () => {
  if(document.fullscreen) controlPanel.classList.toggle('hide');
});

function addEmoji(e){
  const t = document.getElementById('input-text');
  t.value += e;
  updateLED();
}

function setTheme(c,b){
  document.getElementById('color-text').value=c;
  document.getElementById('color-bg').value=b;
  updateLED();
}

function toggleScroll(){
  scrollOn=!scrollOn;
  const b=document.getElementById('btn-scroll');
  if(scrollOn){b.innerText='静止';b.className='btn-scroll-on';}
  else{b.innerText='滚动';b.className='btn-scroll-off';}
  updateLED();
}

function toggleMarquee(){
  lightOn=!lightOn;
  const b=document.getElementById('btn-marquee');
  if(lightOn){b.innerText='关闭跑马灯';b.className='btn-marquee-on';}
  else{b.innerText='打开跑马灯';b.className='btn-marquee-off';}
  updateLED();
}

function setMarqueeStyle(s,btn){
  currentStyle=s;
  document.querySelectorAll('.style-btn').forEach(i=>i.classList.remove('active'));
  btn.classList.add('active');
  updateLED();
}

document.getElementById('range-size').addEventListener('input',()=>{
  document.getElementById('size-val').innerText = document.getElementById('range-size').value+'px';
  updateLED();
});
document.getElementById('range-speed').addEventListener('input',()=>{
  document.getElementById('speed-val').innerText = document.getElementById('range-speed').value;
  updateLED();
});

document.getElementById('input-text').addEventListener('input',updateLED);
document.getElementById('color-text').addEventListener('input',updateLED);
document.getElementById('color-bg').addEventListener('input',updateLED);

function updateLED(){
  if(ani) cancelAnimationFrame(ani);
  const box = document.getElementById('led-box');
  const txt = document.getElementById('input-text').value;
  const color = document.getElementById('color-text').value;
  const bg = document.getElementById('color-bg').value;
  const size = document.getElementById('range-size').value+'px';
  const speed = document.getElementById('range-speed').value;

  box.style.background=bg;
  box.innerHTML='';

  const el = document.createElement('div');
  el.className='text-container';
  el.innerText=txt;
  el.style.color=color;
  el.style.fontSize=size;
  el.style.fontFamily = currentFont;
  el.style.left = currentPos + 'px';

  if(lightOn){
    const f=document.createElement('div');
    f.className='marquee-base marquee-'+currentStyle;
    el.appendChild(f);
  }
  box.appendChild(el);

  if(!scrollOn) {
    el.style.left = '50%';
    el.style.transform = 'translate(-50%,-50%)';
    return;
  }

  function run(){
    currentPos -= speed/10;
    const width = el.offsetWidth;
    if(currentPos < -width) currentPos = window.innerWidth;
    el.style.left = currentPos + 'px';
    ani = requestAnimationFrame(run);
  }
  run();
}

function goFullscreen(){
  const e = document.documentElement;
  e.requestFullscreen?.() || e.webkitRequestFullscreen?.();
  controlPanel.classList.remove('hide');
}

window.onload=updateLED;
</script>
</body>
</html>

sunson1097 · 发表于 2026-6-2 00:03

请教一下,怎么用手机浏览器打开html文件,我放进手机里面,但是长按html文件,没有用浏览器打开的选项

zbmxqddn · 发表于 2026-6-2 07:58

sunson1097 发表于 2026-6-2 00:03
请教一下,怎么用手机浏览器打开html文件,我放进手机里面,但是长按html文件,没有用浏览器打开的选项

直接点击就行吧，不用长按

sunson1097 · 发表于 2026-6-2 10:36

zbmxqddn 发表于 2026-6-2 07:58
直接点击就行吧，不用长按

是啊,我点开只有音乐,html查看器之类的,没有浏览器..所以请教一下你.

zbmxqddn · 发表于 2026-6-2 10:47

sunson1097 发表于 2026-6-2 10:36
是啊,我点开只有音乐,html查看器之类的,没有浏览器..所以请教一下你.

我手机是华为，没试过，你可以问问豆包

zbmxqddn · 发表于 2026-6-2 11:37

sunson1097 发表于 2026-6-2 10:36
是啊,我点开只有音乐,html查看器之类的,没有浏览器..所以请教一下你.

也可以下载这个打包的APK文件

通过网盘分享的文件：led文字 1.0.zip
链接: https://pan.baidu.com/s/1N39PS_WWGcYugCFpweT3_w?pwd=3hti 提取码: 3hti 复制这段内容后打开百度网盘手机App，操作更方便哦

sunson1097 · 发表于 2026-6-2 23:00

zbmxqddn 发表于 2026-6-2 11:37
也可以下载这个打包的APK文件

通过网盘分享的文件：led文字 1.0.zip

谢谢啦

..安装后能用,不过点几下后会出现弹窗,需要跳转.
还有就是有个小建议,点击"全屏"后,需要按返回键,程序才能跳转到全屏字幕,看看有没有优化的办法哈

zbmxqddn · 发表于 2026-6-3 10:11

sunson1097 发表于 2026-6-2 23:00
谢谢啦..安装后能用,不过点几下后会出现弹窗,需要跳转.
还有就是有个小建议,点击"全屏"后,需要 ...

APK是后封装的，用的免费工具，弹窗应该是工具带的，最好用html文件，啥问题也没有

少污污 · 发表于 2026-6-4 20:00

好像有些功能不能正常使用。

laowang99 · 发表于 2026-6-9 10:53

你好怎么全屏不了 k90Promax

帐号		自动登录	找回密码
密码			注册[Register]

[学习记录] LED字幕 演唱会必备

[学习记录] LED字幕演唱会必备