Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add sound

  • Loading branch information...
commit 850007fd053af69ae404f30e31fdd01cc5ffd159 1 parent 54c8cb5
ShiChunhua authored
Showing with 70 additions and 6 deletions.
  1. +26 −6 mobile/index.html
  2. +44 −0 mobile/mob.css
View
32 mobile/index.html
@@ -9,13 +9,33 @@
<link rel="apple-touch-icon" sizes="72x72" href="images/ipadicon.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/retinaicon.png" />
- <title>DumDum</title>
- <link rel="stylesheet" type="text/css" href="mob.css" />
+ <title>Numb</title>
+ <link rel="stylesheet" type="text/css" href="mob.css" />
+ <script>
+ function playSound(){
+ document.querySelector("#audioCtrol").play();
+ }
+ </script>
</head>
<body>
- <audio controls="controls" autoplay="autoplay">
- <source src="sound/numb.mp3" type="audio/mp3" />
- Your browser does not support the audio element.
- </audio>
+ <div class="btnBox">
+ <div id="play" onclick="playSound();">
+ <div>
+ <span></span>
+ </div>
+ </div>
+ <div id="pause">
+ <div>
+ <span></span>
+ <span></span>
+ </div>
+ </div>
+ </div>
+ <div class="audioBox">
+ <audio id="audioCtrol" controls="controls" preload="auto">
+ <source src="sound/numb.mp3" type="audio/mp3" />
+ Your browser does not support the audio element.
+ </audio>
+ </div>
</body>
</html>
View
44 mobile/mob.css
@@ -2,4 +2,48 @@ body {
-webkit-touch-callout: none;
-webkit-user-select: none;
background: #000;
+}
+
+.audioBox {
+ position: absolute;
+ left: -10000px;
+ top: -10000px;
+}
+.btnBox {
+ display: -webkit-box;
+}
+
+#play {
+ position: absolute;
+ width: 300px;
+ height: 300px;
+ top: 50%;
+ left: 50%;
+ margin-left: -150px;
+ margin-top: -150px;
+ border-radius: 150px;
+ background: #FFF;
+}
+#play div {
+ position: absolute;
+ width: 240px;
+ height: 240px;
+ top: 50%;
+ left: 50%;
+ margin-left: -120px;
+ margin-top: -120px;
+ border-radius: 150px;
+ background: #000;
+}
+#play span {
+ position: absolute;
+ width: 0;
+ height: 0;
+ top: 50%;
+ left: 50%;
+ margin-left: -40px;
+ margin-top: -50px;
+ border-left: 100px solid #FFF;
+ border-top: 50px solid transparent;
+ border-bottom: 50px solid transparent;
}
Please sign in to comment.
Something went wrong with that request. Please try again.