10press

以前てがろぐでmp3やmp4を埋め込み表示するjavascriptを公開しましたが不具合があった（参考）ので修正していたのを今更ですがここに置いておきます。前回のものを使ってくださっている方はよろしければ下記のものに差し替えてください。

// MP3とMP4の画像をオーディオまたはビデオ要素に変換
document.querySelectorAll('img[src$=".mp3"], img[src$=".mp4"]').forEach((img) => {
  const fileType = img.src.endsWith('.mp3') ? 'audio' : 'video'; // 拡張子でタイプを判定
  const mediaElement = document.createElement(fileType); // 'audio'または'video'を作成
  mediaElement.controls = true;
  mediaElement.className = img.className;

  const source = document.createElement('source');
  source.src = img.src;
  source.type = fileType === 'audio' ? 'audio/mp3' : 'video/mp4'; // メディアのタイプを設定

  mediaElement.appendChild(source);

  // imgの親要素がaタグの場合
  const parentElement = img.parentNode;
  if (parentElement.tagName.toLowerCase() === 'a') {
    const parentClass = parentElement.className;

    const span = document.createElement('span');
    span.className = parentClass; // 親のaタグからクラスを引き継ぐ

    span.appendChild(mediaElement);

    parentElement.parentNode.replaceChild(span, parentElement);
  } else {
    // 親要素がaタグでない場合は、画像要素だけ置き換え
    img.parentNode.replaceChild(mediaElement, img);
  }
});