TEMPO: 애니메이션 GIF/PDF/SVG로 사운드 재생

Question 1

딸깍 하는 소리아래 이미지에서 작동 중인 메트로놈(SVG 버전)을 확인하세요.

이 animate기반 예제는 두 가지 버전으로 제공됩니다.

그만큼PDF버전에는 Acrobat Reader가 필요하므로 데스크톱 PC용 Windows 및 OSX 플랫폼으로 제한됩니다. (모바일 기기는 지원하지 않습니다.) PDF 버전은 media9내장된 사운드 파일을 재생하기 위해 사용됩니다.click.mp3animate, 이미 매뉴얼에 똑딱거리는 메트로놈 예제를 제공하는 패키지 에서 가져온 것입니다 .

독립형SVG버전은 대부분의 최신 웹 브라우저(Firefox, Chrome, Opera ...), 심지어 모바일 장치에서도 실행됩니다. 여기서 사운드는 HTML5 태그를 사용하여 Base64로 인코딩된 Blob으로 포함됩니다 <audio>. ( 명령줄에서 click.mp3" "로 인코딩되었습니다 .) 물리적으로 포함된 사운드 파일은 SVG를 자체 포함하게 만듭니다.base64 click.mp3

두 경우 모두 실행 중인 애니메이션의 프레임이 변경될 때마다 JavaScript에 의해 사운드 재생이 시작됩니다. 의 "타임라인" 기능은 animateJS 코드를 각 프레임(타임라인 입력 frames.txt)과 연결하는 데 사용됩니다.

템포 마커는 두 번째 animateinline환경으로 구현됩니다. +/- 버튼을 사용하여 단계적으로 조절할 수 있는 39가지 일반적인 메트로놈 속도를 제공합니다. 버튼은 animateJavaScript 인터페이스를 사용하여 템포 마커 프레임 번호를 늘리거나 줄입니다. 또 다른 타임라인 파일인 는 tempo.txt의 JS 인터페이스를 사용하여 그에 따라 메트로놈 속도를 조정하는 JS 스니펫과 각 마커 프레임을 연결합니다 animate.

PDFpdflatex버전 , lualatex, latex+dvips+ps2pdf, 또는 다음 으로 컴파일됩니다 xelatex.

\documentclass[varwidth,border=12pt]{standalone}

\usepackage{tikz}
\usepackage{animate}
\usepackage{media9}
\usepackage{fontawesome5}

% tempo markers
\def\tempos{{40,42,44,46,48,50,52,54,56,58,60,63,66,69,72,76,80,84,88,92,96,100,104,108,112,116,120,126,132,138,144,152,160,168,176,184,192,200,208}}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% timeline files
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% metronome
\usepackage{filecontents}
\begin{filecontents*}{frames.txt}
::0: annotRM['click'].callAS('play');
::1: annotRM['click'].callAS('play');
::2: annotRM['click'].callAS('play');
::3: annotRM['click'].callAS('play');
\end{filecontents*}
% tempo
\newwrite\TimeLineFile
\immediate\openout\TimeLineFile=tempo.txt
\foreach \i in {0,1,...,38} {
    %JavaScript for scaling the metronome's default speed (60 frames per min)
    \pgfmathparse{\tempos[\i]/60}
    \immediate\write\TimeLineFile{::\i:anim.metronome.speed=\pgfmathresult;}
}
\immediate\closeout\TimeLineFile
%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\setlength{\textwidth}{4.4cm}

\begin{document}
\begin{center}
%the sound player  
\makebox[0pt][r]{\includemedia[
  width=1ex,height=1ex,
  label=click,
  addresource=click.mp3,
  activate=pageopen,transparent,noplaybutton,
  flashvars={source=click.mp3&hideBar=true}
]{}{APlayer.swf}}%
\makebox[4cm][l]{The \LaTeX{} Metronome}\\[1ex]

%%%%%%%%%%%
% metronome
%%%%%%%%%%%
\begin{animateinline}[label=metronome,nomouse,loop,timeline=frames.txt]{1}
  \multiframe{4}{n=1+1}{
    \begin{tikzpicture}
      \path (0.3,-0.5) rectangle (4.7,0.5);
      \shade[inner color=green,outer color=green!10] (\n,0) circle(.6);
      \foreach \i in {1,...,4} \fill[cyan] (\i,0) circle(.3);
    \end{tikzpicture}
  }
\end{animateinline}

%%%%%%%%%%%
% controls
%%%%%%%%%%%
\makebox[4cm]{%
\mediabutton[
  jsaction={
    if(anim.metronome.isPlaying) anim.metronome.stopFirst(); 
    else anim.metronome.playFwd();
  }
]{\faPowerOff}\hfill
% tempo
\mediabutton[
  jsaction={ try {--anim.tempo.frameNum;} catch (e) {} }
]{\faMinusCircle}\,%
\begin{animateinline}[label=tempo,step,nomouse,poster=10,timeline=tempo.txt]{1}
  \multiframe{39}{i=0+1}{
    \pgfmathparse{\tempos[\i]}
    \makebox[\widthof{000}][c]{\strut\pgfmathresult}
  }
\end{animateinline}\,%
\mediabutton[
  jsaction={ try {++anim.tempo.frameNum;} catch (e) {} }
]{\faPlusCircle}}
\end{center}
\end{document}

SVG버전, 컴파일할 버전

latex tempoForWeb.tex
latex tempoForWeb.tex
dvisvgm --font-format=woff --exact --zoom=-1 tempoForWeb.dvi

SVG는 웹 브라우저에서 독립형으로 보거나 HTML 태그를 통해 웹 페이지에 삽입할 수 있습니다 <object>.

\documentclass[dvisvgm,varwidth,preview]{standalone}

\usepackage{tikz}
\usepackage{animate}
\usepackage{fontawesome5}

% tempo markers
\def\tempos{{40,42,44,46,48,50,52,54,56,58,60,63,66,69,72,76,80,84,88,92,96,100,104,108,112,116,120,126,132,138,144,152,160,168,176,184,192,200,208}}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% timeline files
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% metronome
\usepackage{filecontents}
\begin{filecontents*}{frames.txt}
::0:$('click').play();
::1:$('click').play();
::2:$('click').play();
::3:$('click').play();
\end{filecontents*}
% tempo
\newwrite\TimeLineFile
\immediate\openout\TimeLineFile=tempo.txt
\foreach \i in {0,1,...,38} {
    %JavaScript for scaling the metronome's default speed (60 frames per min)
    \pgfmathparse{\tempos[\i]/60}
    \immediate\write\TimeLineFile{::\i:anim.metronome.speed=\pgfmathresult;}
}
\immediate\closeout\TimeLineFile
%%%%%%%%%%%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% for producing push buttons
%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\ExplSyntaxOn
\def\controlButton#1#2{% #1:button face, #2 JavaScript
  \sbox{0}{#1}
  \makebox[0pt][l]{\usebox{0}}
  \pbs_pdfannot:nnnn{\wd0}{\ht0}{\dp0}{cursor='pointer'~onmousedown='#2'}
  \phantom{\usebox{0}}
}
\ExplSyntaxOff
%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\setlength{\textwidth}{4.4cm}

\begin{document}
% embed sound
\special{dvisvgm:rawdef
  <audio xmlns="http://www.w3.org/1999/xhtml" id='click'>
    <source
    src="data:audio/mpeg;base64,
    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
    qqqqqqqqqqqq" type="audio/mpeg"/>
%    <source src="click.mp3" type="audio/mpeg"/> % alternatively: separate mp3
  </audio>
  <script type="text/javascript">
  <![CDATA[
    function $(id) {return document.getElementById(id);};
  ]]>
  </script>
}
\begin{center}
\makebox[4cm][l]{The \LaTeX{} Metronome}\\[1ex]

%%%%%%%%%%%
% metronome
%%%%%%%%%%%
\begin{animateinline}[label=metronome,nomouse,loop,timeline=frames.txt]{1}
  \multiframe{4}{n=1+1}{
    \begin{tikzpicture}
      \path (0.3,-0.5) rectangle (4.7,0.5);
      \shade[inner color=green,outer color=green!10] (\n,0) circle(.6);
      \foreach \i in {1,...,4} \fill[cyan] (\i,0) circle(.3);
    \end{tikzpicture}
  }
\end{animateinline}

%%%%%%%%%%%
% controls
%%%%%%%%%%%
\makebox[4cm]{%
\controlButton{\faPowerOff}{%
  if(anim.metronome.isPlaying) anim.metronome.stopFirst(); 
  else anim.metronome.playFwd();
}\hfill
% tempo
\controlButton{\faMinusCircle}{%
  try {--anim.tempo.frameNum;} catch (e) {}
}\,%
\begin{animateinline}[label=tempo,step,nomouse,poster=10,timeline=tempo.txt]{1}
  \multiframe{39}{i=0+1}{
    \pgfmathparse{\tempos[\i]}
    \makebox[\widthof{000}][c]{\strut\pgfmathresult}
  }
\end{animateinline}\,%
\controlButton{\faPlusCircle}{%
  try {++anim.tempo.frameNum;} catch (e) {}
}}
\end{center}
\end{document}

독립형, 애니메이션GIF멍청하고 귀머거리입니다. afaik이며 포함된 Gif(웹 페이지에 있음)를 사운드와 동기화하는 쉽게 접근할 수 있는 방법이 없는 것 같습니다. 하지만SVG벡터형이므로 자유롭게 확장 가능하므로 훨씬 우수합니다.

Answer