html - HTML5とCSS3を使用して、Flashのように何秒も「フレーム」を切り替える

Question

HTML5とCSS3を使用してMP3/OGG​​をロードしたいのですが、表示されているテキストと一緒に読み取られます。画面の表示が終了すると、新しい画面に切り替わります。

したがって、最初の画面はmp3の起動時に読み込まれ、12秒まで留まります（これは、mp3の音声がそれを読み取るのにかかる時間です）。12秒で、次のテキストに切り替わり、22秒まで留まります。全部で7段落になります。

以下は私が見つけた例のコーディングですが、必要なタイミングで正しく動作するように編集できません。

HTMLの基本：

<audio controls="controls" preload="auto" autoplay="autoplay">
    <source src="valmp3.ogg" type="audio/ogg" />
    <source src="valmp3.mp3" type="audio/mpeg" />
        Your browser does not support the audio element.
</audio> 
<ul>
    <li>Paragraph 1</li>
    <!--^^Should load when the mp3 starts and stay for 12 seconds^^-->

    <li>Paragraph 2</li>
    <!--^^Should load at 12 seconds and stay until 22 seconds^^-->

    <li> Paragraph 3</li>

    <li> Paragraph 4</li>

    <li>Paragraph 5</li>

    <li>Paragraph 6</li>

    <li>Paragraph 7</li>
</ul>

CSS：

* {
  margin: 0;
  padding: 0;
}
body{
  background: #422A20;
  font-size: 2em;
}
ul {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
}
ul li {
  color: transparent;
  font-size: 250%;
  position: absolute;
  text-align: center;
  top: 35%;
  width: 100%;
}

/* delay between each text */
ul li:nth-child(1),
ul li:nth-child(2),
ul li:nth-child(3),
ul li:nth-child(4) {
  -moz-animation: blurFadeInOut 3s ease-in backwards;
  -ms-animation: blurFadeInOut 3s ease-in backwards;
  -webkit-animation: blurFadeInOut 3s ease-in backwards;
}
ul li:nth-child(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
}
ul li:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
ul li:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
ul li:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
ul li:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
/* delay for the last slide */
ul li:nth-child(5) span {
  -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
  -moz-animation: blurFadeIn 1s ease-in 12s backwards;
  -ms-animation: blurFadeIn 3s ease-in 12s backwards;
  animation: blurFadeIn 3s ease-in 12s backwards;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
ul li:nth-child(5) span:nth-child(2) {
  -webkit-animation-delay: 13s;
  -moz-animation-delay: 13s;
  -ms-animation-delay: 13s;
  animation-delay: 13s;
}
ul li:nth-child(5) span:nth-child(3) {
  -webkit-animation-delay: 14s;
  -moz-animation-delay: 14s;
  -ms-animation-delay: 14s;
  animation-delay: 14s;
}

アニメーションのコード：

@-moz-keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); }
}
@-webkit-keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); }
}
@keyframes blurFadeInOut {
  0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); }
  25%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); }
  100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); }
}