语音驱动文字

语音驱动文字，文字实现歌词效果。文字由用户输入

<audio src=""></audio>
<textarea value="xxxx">

实现方案

方案一

通过split 分割开文本，展示内容转为。span 里面的设置单独的css 样式，textarea 里面的需要用空格填充上，保证 textarea 内容长度是保持不变的

<span>xxx</span><textarea value='123'>

方案二 ✅

模拟出 textarea 的输入效果。

输入框透明，文本透明，遮盖在 div 上层，通过div 层显示出用户输入文本，以及歌词效果

<div style="position:relative">
  <div> 歌词</div>
  <textarea value='歌词' style="opacity:0;position:absolute;top:0,left:0;width:100%;height:100%">
</div>

通过audio 播放进度控制文字百分比，去split 文字到对应的dom 中apply 相应的css 样式


    pendingAudioText() {
      const len = this.textareaIuput.length;
      return this.textareaIuput.slice((this.auditionToAudio.progressPercent * len) >> 0);
    },

问题： textarea 输入超出高度后，滚动位置计算

方案一：

textarea 可以在溢出的时候自动换行，需要同步计算实际展示文本框的 scrollTop 的值实现同步效果（change 事件的时候去同步更新） textarea 区域滚动的时候。文本展示区域需要同步实现滚动效果。需要监听scroll 滚动事件，同步更新滚动条位置（比较麻烦）

方案二：

可以用2层盒子，textarea 盒子在输入状态下，就展示textarea 用于文本操作，当失去焦点，或者播放的时候，这个时候通过css 样式隐藏掉textarea 盒子，展示出歌词的盒子，

.show {
  opacity:1,
  z-index:1
}

这个时候滚动的是当前展示的盒子，不需要实时同步2个盒子的滚动位置。 但是依旧存在问题，切换回去textarea 的时候

  • 滚动条位置不同步
  • 切回去修改文本的时候，修改文本需要点击 2 次输入框，才能聚焦输入。
Last Updated:
Contributors: rosendo