Skip to content

Commit a5f2497

Browse files
committed
Merge f52e29d into master
2 parents c73d279 + f52e29d commit a5f2497

File tree

1 file changed

+25
-24
lines changed

1 file changed

+25
-24
lines changed

doc/music.adoc

+25-24
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
Music and Bass Shake[[music]]
22
-----------------------------
33

4-
In Hexagon, the music is an important element of the game. It is even part of the game mechanics:
4+
In Hexagon, the music is an important element of the game. It is even part of the physical game mechanics:
55
Whenever there is a bass sequence, the whole stage is shaking.
66

77
The original game music is copyrighted. Therefore we provide an alternative track
88
for this tutorial that has a Creative Commons license.
99

10-
There is an issue with Safari, so use a different Browser for this.
10+
There is also an issue with Safari, so use a different browser for this like Google Chrome or the newest Internet Explorer.
1111

1212
## Download the Music
1313
The track that we are going to use is called "Shiny Tech" by Kevin MacLeod.
14-
Download it from the
15-
http://incompetech.com/music/royalty-free/index.html?collection=12&page=1[Incompetech] website.
14+
Download it here:
15+
http://incompetech.com/music/royalty-free/index.html?collection=12&page=1[Incompetech]
1616

17-
Rename it to `shinytech.mp3` and copy it into a `src/music` folder.
17+
Rename it `shinytech.mp3` and copy it into a `src/music` folder.
1818

1919
---
2020

@@ -30,9 +30,10 @@ Rename the downloaded file to "music.mp3" and copy it into the music folder.
3030

3131

3232
## Install the audio library
33+
3334
The audio library abstracts the HTML5 Audio tag for the elm language. It uses native bindings.
3435
Unfortunately Elm discourages the use of native bindings for 3rd party libraries. But until audio
35-
support is available in core we have to use one.
36+
support is available in core, we have to use one.
3637

3738
It is not possible to install such libraries through elm-package. So we have to use git
3839
or download it ourselves. We copy the `elm-audio` library in a folder called `lib/elm-audio`.
@@ -46,16 +47,16 @@ If you are already using git for this tutorial, then you can add it as a submodu
4647

4748
git submodule add https://github.com/xarvh/elm-audio.git lib/elm-audio
4849

49-
This is not enogh though. Elm expects the native module to be named after the package.
50+
This is not enough information though. Elm expects the native module to be named after the package.
5051
So open the file `elm-audio/src/Native/Audio.js` and change the name of the global function
5152
to match the name that you gave your project in `elm-package.json` in the `repository` field.
52-
It uses the syntax `_<username>$<project>$Native_Audio` so if you left it at the default the first
53+
It uses the syntax `_<username>$<project>$Native_Audio`, so if you left it at the default setting the first
5354
line of the module is:
5455

5556
var _sbaechler$polygon$Native_Audio = function() {
5657

5758
While we are here, we can add a few strategic console.log statements for debugging:
58-
* Inside the `oncanplaythrough()` method which fires when the audio has been loaded completely
59+
* Inside the `oncanplaythrough()` method that fires when the audio has been completely loaded
5960
* Inside the `playSound` and `stopSound` method.
6061

6162

@@ -85,9 +86,9 @@ Add a `hasBass : Bool` property as well.
8586
The music property is initialized with the value `Nothing` in the `init` method. `hasBass` is set to
8687
`False`.
8788

88-
The loading of the music file is a Task as well. It sends of the message `MusicLoaded` when the
89-
mp3 has been downloaded (When the browser has fired the `canplaythrough` event).
90-
The task could also fail, therefore we add an `Error` message. A `Noop`
89+
The loading of the music file is a task as well. It sends the message `MusicLoaded` when the
90+
mp3 has been downloaded (when the browser has fired the `canplaythrough` event).
91+
The task could also fail, therefore we need to add an `Error` message. A `Noop`
9192
message is needed as well as a callback for the stop command.
9293

9394
// type Msg
@@ -98,8 +99,8 @@ We curry the `loadSound` method with the file name for the audio file:
9899
// loadSound
99100
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/music/src/Hexagon.elm", lines="120:121" %}{% endcodesnippet %}
100101

101-
The audio library exposes a `Sound` type wich is a reference to a HTML5 Audio tag. The
102-
`PlaybackOptions` object has three attributes: Volume, start and loop.
102+
The audio library exposes a `Sound` type, which is a reference to a HTML5 Audio tag. The
103+
`PlaybackOptions` object has three attributes: volume, start and loop.
103104

104105
We set loop to True and startAt to Nothing, which means that it continues playing from its current
105106
position.
@@ -108,7 +109,7 @@ position.
108109
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/music/src/Hexagon.elm", lines="124:125" %}{% endcodesnippet %}
109110

110111
The `playSound` and `stopSound` functions start and stop the music. They take a reference to the
111-
sound object and an options object and return a command of type message.
112+
sound object and an options object, then returning a command of type message.
112113

113114
They are tasks because playing audio is a side-effect. In case of an error, the Error message is
114115
sent. In case of success (the audio is done playing) the Noop message is sent.
@@ -120,13 +121,13 @@ We use anonymous functions to define the callbacks.
120121
With all the new states the update methods become a bit more complex. However, they are still
121122
easily readable and understandable.
122123

123-
We add the new intermediate helper states. In the `onUserInput` function, update the `nextState`
124+
We now add the new intermediate helper states. In the `onUserInput` function, update the `nextState`
124125
assignment so it uses the new states.
125126

126127
In the `onFrame` function we are going to output new commands as well, so we assign those in the
127-
`let` block. At first we have to make sure, that the music is not `Nothing`. (It won't compile if
128+
`let` block. At first we have to make sure that the music is not `Nothing`. (It won't compile if
128129
this check was missing.) +
129-
In the `Starting` state the music is played from the beginning. The `startAt` value is a `Maybe` as
130+
In the `Starting` state, the music is played from the beginning. The `startAt` value is a `Maybe` as
130131
well so we have to use `Just 0` here.
131132
The other states should be self-explanatory.
132133

@@ -135,7 +136,7 @@ The other states should be self-explanatory.
135136

136137
The update method needs to handle the new states. When the `MusicLoaded` message arrives,
137138
the game state is set to `NewGame` and the music is stored in the model. +
138-
In case of an error we just throw it.
139+
In case of an error, we add another line of programming.
139140

140141
// update
141142
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/music/src/Hexagon.elm", lines="302:314" %}{% endcodesnippet %}
@@ -149,7 +150,7 @@ commands.
149150

150151

151152
## Bass pump
152-
The playing field should pump in sync with the beat. Therefore we have to define
153+
The playing field should pump in sync with the beat. Therefore, we have to define
153154
the speed of the track and the sections where there is a bass part.
154155

155156
Add three variables for beat, amplitude and phase:
@@ -198,7 +199,7 @@ hasBass time =
198199
else False
199200
----
200201

201-
For the original track use those values:
202+
For the original track use these values:
202203

203204
[source,elm]
204205
----
@@ -236,15 +237,15 @@ The `beatPhase` value is used to adjust the timing so it matches with the music.
236237
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/music/src/Hexagon.elm", lines="103:105" %}{% endcodesnippet %}
237238

238239
The center hole is always pulsating but it should be in sync with the rest of the
239-
stage during a bass sequence. For that we adjust the `makeCenterHole` function.
240-
Whenever there is a bass sequence the radius of the center piece should remain constant
240+
stage during a bass sequence. For that effect we adjust the `makeCenterHole` function.
241+
Whenever there is a bass sequence the radius of the center hole should remain constant, or
241242
otherwise it should be pumping.
242243

243244
// makeCenterHole
244245
{% codesnippet "https://raw.githubusercontent.com/macrozone/elm-hexagon-tutorial/chapter/music/src/Hexagon.elm", lines="389:404" %}{% endcodesnippet %}
245246

246247
That was the last piece of the puzzle. Now it is time to test it out. The music should start
247-
playing when the game starts. The stage starts pumping after 21 around seconds.
248+
playing when the game starts. The stage starts pumping after 21 seconds.
248249

249250
If something is not working, compare your code with the full source code
250251
https://github.com/macrozone/elm-hexagon-tutorial/blob/chapter/music/src/Hexagon.elm[here].

0 commit comments

Comments
 (0)