Mercurial > dottes

view dottes.html.learnertune @ 659:763c6916cc7d build-default-259

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Remove old Windows Media Player embedded object for playing audio. We're in the world of HTML5 now. And Firefox has started playing tunes on page download.
author Jim Hague <jim.hague@acm.org>
date Sun, 05 Feb 2017 22:51:30 +0000
parents 2d436a8e3dd2
children f8ab14cc9d8d
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cry Havoc tunes - learning ${title}</title>
  <link rel="stylesheet" href="../css/dottes.css" />

  <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
        rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="container">
    <a href="/">
      <div class="header-strip banner">
        <img src="../img/banner.png">
      </div>
    </a>

    <div class="dottes-body">
      <div class="dottes-tune-display">
        <img src="../img/learner.png">Work out the melody or play along
        with these audio players. They play the melody repeatedly. There's
        a variety of speeds to choose from. You can also download the
        audio files.
      </div>
    </div>

    <div class="dottes-body">
      <div class="dottes-tune-display">
        <div class="dottes-tune-header">
          <div class="dottes-tune-header-icons-column"></div>
          <div class="dottes-tune-header-title-column"></div>
          <div class="dottes-tune-header-composer-column"></div>
          <div class="dottes-tune-header-row">
            <div class="dottes-tune-header-icons">
              <a class="dottes-tune-icon-link" href="${name}.html">
                <img class="dottes-tune-header-image" src="../img/music.png"
                     alt="Dottes">
              </a>
              <a class="dottes-tune-icon-link" href="index.html">
                <img class="dottes-tune-header-image" src="../img/book.png"
                     alt="Tune index">
              </a>
            </div>
            <div class="dottes-tune-header-title">
              <h1>${title}</h1>
              <h2>${subtitle}</h2>
            </div>
            <div class="dottes-tune-header-composer">
              <em>${composer}</em>
            </div>
          </div>
        </div>
        <p>${title} is in the key of ${key}.
        <div class="dottes-tune-learner">
          <div class="dottes-tune-learner-speed-column"></div>
          <div class="dottes-tune-learner-play-column"></div>
          <div class="dottes-tune-learner-download-column"></div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Normal speed
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-midi" download
                       href="../${masterbooke}/${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Slightly slower
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/littleslow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/littleslow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Slow
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/slow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/slow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Very slow
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/veryslow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/veryslow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>