Xjyuk

When practicing piano, TEMPO (an app on iOS, CHplay) is a metronome that often be used to beat on time.

I can make animated GIF/PDF/SVG/frame (in beamer) for TEMPO, but don't know how to play a sound (for example beep 8, mp3 or wav in here) at each beat.

Can anyone help (with full code and clear explanation)? Thank you!

The following code are my MWEs. (these are good examples on animated things)

% TEMPO for piano tempo.tex
% for animated GIF, run on command line (require ImageMagick installed)
% magick -density 200 -delay 100 tempo.pdf tempo.gif
% -delay 100 >>> each frame is 100/100 = 1 second 
documentclass[tikz]standalone
begindocument
foreach n in 1,...,4
pagecolorwhite
begintikzpicture
path (0,-1) rectangle (5,1);
shade[inner color=green,outer color=green!10] 
(n,0) circle(.5);
foreach i in 1,...,4
fill[cyan] (i,0) circle(.3);
endtikzpicture

enddocument

With minor changes, we can get animated PDF (open in Acrobat Reader).

% animated PDF standalone tempopdf.tex
% multiframe4n=1+1 >>> starting frame is with n=1, 
% then plus 1 each frame, so we have 4 frames
% [loop,controls]1 >>> number 1 means 1 second each frame
documentclassstandalone
usepackagetikz
usepackageanimate
begindocument
beginanimateinline[loop,controls]1
multiframe4n=1+1

begintikzpicture
path (0,-1) rectangle (5,1);
shade[inner color=green,outer color=green!10] 
(n,0) circle(.6);
foreach i in 1,...,4
fill[cyan] (i,0) circle(.3);
endtikzpicture

endanimateinline
enddocument

Animated PDF frame in beamer (open with Acrobat Reader)

% animated PDF frame in beamer (open with Acrobat Reader)
documentclassbeamer
usepackagetikz
usepackageanimate
usepackagemultimedia
begindocument
beginframeTEMPO for piano
begincenter
beginanimateinline[loop,controls]1
multiframe4n=1+1

begintikzpicture
path (0,-1) rectangle (5,1);
shade[inner color=green,outer color=green!10] (n,0) circle(.6);
foreach i in 1,...,4 fill[cyan] (i,0) circle(.3);
endtikzpicture

endanimateinline
endcenter
endframe 
enddocument

Click on the image below to see the ticking metronome (SVG version) in action:

The animate-based example comes in two versions.

The PDF version requires Acrobat Reader and is thus restricted to Windows and OSX platforms for desktop PCs. (Mobile devices are not supported.)
The PDF version uses media9 for playing the embedded sound file click.mp3, taken from the animate package which already provides a ticking metronome example in its manual.

The standalone SVG version runs in most contemporary Web browsers (Firefox, Chrome, Opera ...), even on mobile devices. Here the sound is "embedded" using the <audio> tag, but the sound file itself is separate, not physically embedded, and must be bundled with the SVG file.

In either case, playback of the sound is started by JavaScript on every frame change of the running animation. The "timeline" feature of animate is used to associate the JS code with each frame.

PDF version, to be compiled with pdflatex, latex+dvips+ps2pdf, or xelatex:

documentclassbeamer
usepackagetikz
usepackageanimate
usepackagemedia9

usepackagefilecontents
beginfilecontents*frames.txt
::0: annotRM['click'].callAS('play');
::1: annotRM['click'].callAS('play');
::2: annotRM['click'].callAS('play');
::3: annotRM['click'].callAS('play');
endfilecontents*

begindocument
beginframeTEMPO for piano
begincenter
%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%
% animation provided by OP
beginanimateinline[loop,controls,timeline=frames.txt]1
 multiframe4n=1+1
 begintikzpicture
 path (0,-1) rectangle (5,1);
 shade[inner color=green,outer color=green!10] (n,0) circle(.6);
 foreach i in 1,...,4 fill[cyan] (i,0) circle(.3);
 endtikzpicture
 
endanimateinline
endcenter
endframe
enddocument

SVG version, to be compiled with

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

The SVG can be viewed standalone in a Web browser, or embedded by means of the <object> HTML tag.

documentclass[dvisvgm,preview]standalone

usepackagetikz
usepackageanimate

usepackagefilecontents
beginfilecontents*frames.txt
::0: myClick.play();
::1: myClick.play();
::2: myClick.play();
::3: myClick.play();
endfilecontents*

begindocument
specialdvisvgm:rawdef
 <audio xmlns="http://www.w3.org/1999/xhtml" id='click'>
 <source src="click.mp3" type="audio/mpeg"/>
 </audio>
 <script type="text/javascript">
 <![CDATA[
 var myClick = document.getElementById('click');
 function playClick () 
 try myClick.play(); catch (e) console.log(e);
 
 ]]>
 </script>

beginanimateinline[loop,controls,timeline=frames.txt]1
 multiframe4n=1+1
 begintikzpicture
 path (0,-1) rectangle (5,1);
 shade[inner color=green,outer color=green!10] (n,0) circle(.6);
 foreach i in 1,...,4 fill[cyan] (i,0) circle(.3);
 endtikzpicture
 
endanimateinline
enddocument

Standalone, animated GIF is dumb and deaf, afaik, and there does not seem to exist an easily accessible method to synchronize an embedded Gif (in a Web page) with a sound. But SVG is much superior, since it is vectorial and thus freely scalable.

You can alternatively do the animation elsewhere with sound and add that to the Beamer Files. Beamer seems to have an multimedia package. Also movie15 seems to be promising.

Look at this thread about Multimedia/sound How to include audio file in PDF, maybe thats a valid startingpoint.