从此
📄文章 #️⃣专题 🌐酷站 👨‍💻技术 📺 📱

Web高级技术 - HTML、JavaScript、WebAssembly

Web高级技术 - HTML、JavaScript、WebAssembly、CSS
新：
  Chrome 133 MediaRecorder API 中加入对 HEVC 编码的支持


基础:
  判断实例方法或属性 - Reflect.has(new TextEncoder().encode("x"),"toBase64"); // 静态方法则用 if(Uint8Array.fromBase64)
  判断实例方法或属性(非继承) - Object.hasOwn({"name":"x"},"name");

  时间本地化显示 - new Intl.DurationFormat("zh-Hans-CN", { style: "long" }).format({  hours: 0,  minutes: 46,  seconds: 40,});
  新日期时间API - Temporal.Now.instant().since("2024-12-09T17:58:57.401+08:00").seconds; // 自指定时间后过去的秒数。

点击查看：HTML标准(Living Standard) HTML标准(中文版)

点击查看：HTML5的7类元素

点击查看：浏览器访问网页 建网站发布Web内容 - 《普通人玩技术》第1期

点击查看：Windows系统全程只用键盘快捷键访问网页 - 《普通人玩技术》第2期

内容

textarea高度自适应(根据内容自动调整高度、避免出现滚动条)

特殊

  HTML标签template中存在head和body均会自动清除，比如 <template><head><title>t</title></head><body>x</body></template> 用t.innerHTML获取的是：
    <title>t</title>x
  
  带声调拼音，在中文OS默认宋体下高度未对齐 解决 font-family: sans-serif;

  录音录像：
    navigator.mediaDevices.getUserMedia({audio: true}) // {video: true, audio: true}
      .then(stream=>{ var mr=new MediaRecorder(stream, {mimeType: "audio/webm;codecs=opus"}); // 遍历属性：
        for(var k in mr){ console.log(k+": "+mr[k]); } }).catch(console.error);

  录制格式支持情况： 媒体文件信息查看工具(或用ffprobe) - https://github.com/MediaArea/MediaInfo
    mimeType - 若不写codecs属性，或与其值无任何匹配项，则根据MIME容器推断出兼容的编解码格式；通常左起依次尝试，若音频写在了视频前方，则视频编码时会自动跳过，通过逗号分隔。
    首选Chrome、Edge和Firefox均支持的*.webm容器文件：audio/webm;codecs=opus 和 video/webm;codecs=opus,vp8
    iOS Safari 正式版只支持 video/mp4;codecs=opus  每日构建版已支持WebM+Opus - https://bugs.webkit.org/show_bug.cgi?id=284164

    网络传输用有损压缩的 audio/webm;codecs=opus 无损录音用PCM(PCM非WAV专用)：MediaRecorder.isTypeSupported("audio/webm;codecs=pcm"); 
    Chrome支持媒体格式列表 - https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/web_tests/fast/mediarecorder/MediaRecorder-isTypeSupported.html

    AudioWorklet取代了弃用的ScriptProcessor，用于主线程外处理提升效率。
    解码音频数据 - new AudioContext().decodeAudioData(buffer, function(audioBuffer) { /* 拼接、修剪 */ });
      decodeAudioData 会自动忽略webm容器内视频数据，并将原始数据填充到AudioBuffer对象中，内部采用PCM数据格式，丢弃文件头等专用信息。
    OfflineAudioContext - 纯计算不走硬件。
      var oac=new OfflineAudioContext(decodedAudioData...); oac.createBufferSource(); ... const renderedBuffer = await oac.startRendering()

  库：
    ffmpeg.wasm(约30MB) - https://github.com/ffmpegwasm/ffmpeg.wasm
      await ffmpeg.run('-i', 'bj.mp4', '-i', 'record.mp3', '-c:v', 'copy', '-c:a', 'aac', '-strict', 'experimental', '-map', '0:v:0', '-map', '1:a:0', 'output.mp4');
    webm js库 - https://github.com/jscodec/jswebm
    mp4 - https://gpac.github.io/mp4box.js/
    flac - https://github.com/mmig/libflac.js
    webm转wav - https://blog.csdn.net/u012663281/article/details/112919404

var types = [
  "video/webm",
  "audio/webm",
  "video/webm;codecs=vp8",
  "video/webm;codecs=daala",
  "video/webm;codecs=h264",
  "audio/webm;codecs=opus",
  "video/mpeg",
];

for (var i in types) {
  console.log(
    "Is " +
      types[i] +
      " supported? " +
      (MediaRecorder.isTypeSupported(types[i]) ? "Maybe!" : "Nope :("),
  );
}

  map方法内await不会等待： arrays.map(async (chunk, index) => { await fetch(url); })
    可换为：for (const chunk of ac) { await fetch(url); }

  测量用时：
    performance.mark('start-x');
    // doSomething();
    performance.mark('end-x');
    performance.measure('x', 'start-x', 'end-x');