Exercise 8

sebschu · May 5, 2017 · 578355d · 578355d
1 parent 6f032aa
commit 578355d
Show file tree

Hide file tree

Showing 17 changed files with 47 additions and 1 deletion.
diff --git a/exercises/08_basic_audio/README.md b/exercises/08_basic_audio/README.md
@@ -0,0 +1,18 @@
+# Exercise 8: Playing Audio
+
+In this exercise, you will include an audio player.
+Use the skeleton in `exercises/08_basic_audio/exercise.html`.
+
+Playing audio on a web page always used to be a bit of a hassle because HTML
+did not provide this functionality and you had to include things like Flash
+audio players. Fortunately, HTML5 now defines an `audio` element which can be
+used to play audio files. However, as this is a fairly new addition, it has not
+been completely standardized and therefore some browsers can only play some types
+of audio. You should therefore always prepare your stimuli as mp3 and as ogg
+encoded audio files.
+
+
+## Steps
+
+1. Add an [audio player](https://www.w3schools.com/html/html5_audio.asp)
+to play the `boogalooo` audio file in the audio directory.
diff --git a/exercises/08_basic_audio/audio/boogalooo.mp3 b/exercises/08_basic_audio/audio/boogalooo.mp3
diff --git a/exercises/08_basic_audio/audio/boogalooo.ogg b/exercises/08_basic_audio/audio/boogalooo.ogg
diff --git a/exercises/08_basic_audio/audio/flamingo.mp3 b/exercises/08_basic_audio/audio/flamingo.mp3
diff --git a/exercises/08_basic_audio/audio/flamingo.ogg b/exercises/08_basic_audio/audio/flamingo.ogg
diff --git a/exercises/08_basic_audio/audio/twist.mp3 b/exercises/08_basic_audio/audio/twist.mp3
diff --git a/exercises/08_basic_audio/audio/twist.ogg b/exercises/08_basic_audio/audio/twist.ogg
diff --git a/exercises/08_basic_audio/exercise.html b/exercises/08_basic_audio/exercise.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Playing audio</title>
+  </head>
+  <body>
+    <h1>Audio</h1>
+
+    <p> Click play to listen to the audio.</p>
+  </body>
+</html>
diff --git a/solutions/07_js_forms/solution.html b/solutions/07_js_forms/solution.html
@@ -2,7 +2,6 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="./css/main.css">
     <script src="js/jquery.js" charset="utf-8"></script>
     <script src="js/functions.js" charset="utf-8"></script>
     <title>HTML Form</title>

diff --git a/solutions/08_basic_audio/audio/boogalooo.mp3 b/solutions/08_basic_audio/audio/boogalooo.mp3
diff --git a/solutions/08_basic_audio/audio/boogalooo.ogg b/solutions/08_basic_audio/audio/boogalooo.ogg
diff --git a/solutions/08_basic_audio/audio/flamingo.mp3 b/solutions/08_basic_audio/audio/flamingo.mp3
diff --git a/solutions/08_basic_audio/audio/flamingo.ogg b/solutions/08_basic_audio/audio/flamingo.ogg
diff --git a/solutions/08_basic_audio/audio/twist.mp3 b/solutions/08_basic_audio/audio/twist.mp3
diff --git a/solutions/08_basic_audio/audio/twist.ogg b/solutions/08_basic_audio/audio/twist.ogg
diff --git a/solutions/08_basic_audio/solution.html b/solutions/08_basic_audio/solution.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Playing audio</title>
+  </head>
+  <body>
+    <h1>Audio</h1>
+
+    <p> Click play to listen to the audio.</p>
+    <audio controls>
+      <source src="audio/boogalooo.ogg" type="audio/ogg">
+      <source src="audio/boogalooo.mp3" type="audio/mpeg">
+    Your browser does not support the audio element.
+    </audio>
+  </body>
+</html>
diff --git a/solutions/09_js_audio/solution.html b/solutions/09_js_audio/solution.html