jquery - Play specific html5 audio file if element is visible on screen -

I have a set of animated elements that go to a single device.

  & lt; Div class = "stable-root" & gt; & Lt; Div class = "animated-child animated -a" & gt; & Lt; / Div & gt; & Lt; Div class = "animated-child animated-two" & gt; & Lt; / Div & gt; & Lt; / Div & gt; . Stable-root {height: 10am; Width: 20em; Background color: red; Status: Relative; Hidden flurry; }. Animated-kids {height: 5em; Width: 5em; Status: Completed; }. External-A {-bbkit-animation: 5s linear infinite runs; Background color: green; } @ -webkit-keyframe runs {0% {left: -5em; } 100% {LEFT: -WebKit-Calc (100% + 5em); }}. Unlimited-two {-webkit-animation: 5s moving-two linear endless; -webkit- animation-delay: 2s; Background color: blue; Left: -5em; } @ -webkit-keyframe moving-two {0% {left: -5em; } 100% {LEFT: -WebKit-Calc (100% + 5em); }}  

Each of these elements enters div, so if I want to play an html5 audio file which is specific to an animated element, different sounds in blue and green sections Once these elements are conscious of the screen, I would like to stop their voice. Etc etc ...

Can it be done in simple jquery? Any other help - Thanks a lot in advance