webdev-assignment02/topic.html at master · gianni35011/webdev-assignment02 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset="utf-8">
  <meta name='description' content="Group Assignment 1 - topic.html">
  <meta name='keywords' content="topic_page">
  <meta name="author" content="webify_group"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> ABOUT MP3 </title>
  <link rel="stylesheet" href="styles/style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
   <section id="eheader">
        <nav>
            <a href="index.html"><img src="Images/logo.png" alt= "Webify Logo"></a>
            <div class="nav-links">
            <ul>
                <li id='selected'><a href="topic.html">TOPIC</a></li>
                <li><a href="quiz.html">QUIZ</a></li>
                <li><a href="enhancements.html">ENHANCEMENTS</a></li>
            </ul>
            </div>
        </nav>
    </section>

  <section id="big-text">
    <div class="big-text tcontainer">
        <h1>ABOUT MP3 <span></span></h1>
        <h2>Basic MP3 information <span></span></h2>
      </div>
  </section>

          <aside id="MP3fact">
    <h3>Do you know that</h3>
      <blockquote cite="https://www.nstec.com/technology/what-type-of-information-or-dat-is-mp3/">
        <p>A 32-megabyte song on a CD can be compressed down to about 3 MB by using this coding format. However, due to
          its lossy format, some audio information will need to be sacrificed to reduce size significantly.</p>
      </blockquote>
    </aside>
  <section class="intro">
    <br>
    <div class="def">
      <h2>WHAT IS MP3?</h2>
      <p><dfn title="MP3">MP3(MPEG-1 Audio Layer III)</dfn> is a coding format for digital audio. MP3 is also a means of
        compressing a sound sequence into a very small file, to enable digital storage and transmission.</p>
    </div>
    <dl>
      <dt><strong>Purpose:</strong></dt>
      <dd>- Compress audio files with minimal loss to the quality of sound, retaining close to CD quality. </dd>
      <dd>- Compress audio files by a factor of 10 or 12 by using data-compression algorithm. </dd>
      <dt><strong>Main features:</strong></dt>
      <dd>- Faster download, more free spaces.</dd>
      <dd>- MP3 format uses characteristics of how humans hear sounds to design the compression algorithm. For example:
        <ul>
          <li>Certain sounds the human ear cannot hear.</li>
          <li>Certain sounds that the human ear hears much better than others.</li>
          <li>Certain parts of a song can be eliminated without significantly.</li>
          <li>If there are two sounds playing simultaneously, we hear the louder one but struggle to hear the softer
            one.</li>
        </ul>
      </dd>
      <dd>- Shrink songs considerably by a factor of at least 10 without major loss to quality.</dd>
    </dl>
  </section>

  <br>
  <section class="developers">
    <h2><strong>WHO DEVELOPED MP3?</strong></h2>
    <div id="flexbox">
      <p class="mp3-p">It is difficult to attribute one person to the development of the MP3 file format due to its reliance on
        other technologies such as OCF and PXFM and the collaborate efforts of Ernst Eberlein, Heinz Gerhäuser,
        Bernhard Grill, Jürgen Herre and Harald Popp. However, <span>Karlheinz Brandenburg</span> is often considered
        the inventor of the MP3 due to his crucial contributions to its development.</p>
      <figure>
        <img src="/Images/karlheinz.jpg"
          class="Karlheinz" alt="Karlheinz Brandenburg"/>

        <figcaption><em>Fig.1 - Karlheinz Brandenburg.</em></figcaption>
      </figure>
    </div>
    <div class="lb">
      <img width='5%' src="/Images/lightbulb.png" alt="light bulb">
    </div>
    <div id="q&a">
      <h4>Q&A SECTION:</h4>
      <ol>
        <li>
          <div class="question-title">
            When was it developed?
          </div>
          Taking ideas from ASPEC and MPEG-1 Layer II, and some of their own ideas Karlheinz
          Brandenburg and James D. Johnston created MP3 file which was released in 1993.

        </li>
        <li>
          <div class="question-title">
            Why was it developed?
          </div>
          In December 1988 the ISO MPEG Audio group (A group which sets standards for media
          coding) called for an audio coding standard.
        </li>
        <li>
          <div class="question-title">
            Who responsible for managing it?
          </div>
          MPEG Audio Group is responsible for managing media standards this
          includes the MP3 file format.
        </li>
      </ol>
    </div>
  </section><br>

  <section class="gd">
    <h2>GROWTH & DECLINE</h2>
    <br>
    <table>
      <caption><b>Growth and decline of MP3</b></caption>
      <tr>
        <th class="cl">Growth</th>
        <th class="cl">Decline</th>
      </tr>
      <tr>
        <td >Due to the MP3s ability to compress to a relatively small size while keeping most of its quality, the file
          format exploded in popularity in the 90s.</td>
        <td>Competing file formats emerge and a move to music streaming which typically utilise the OGG file format to
          stream music (Such as Spotify)</td>
      </tr>
      <tr>
        <td class="cl">It allowed users to store 1000s of songs on devices with limited storage.</td>
        <td class="cl">MP3 lost popularity since the 90s as new file formats became standard such as AAC (Advanced Audio Coding).
        </td>
      </tr>
      <tr>
        <td>It also allowed music files to be easily shared over the internet spawning services such as the
          controversial Napster.</td>
        <td></td>
      </tr>
    </table>
    <br>
  </section>
  <div class="ref">
    <h3>Reference:</h3>
    <ol>
      <li>TechTarget, May 2006, <em>DEFINITION - MP3 (MPEG-1 Audio Layer-3)</em>, WhatIs, available from <a href="https://whatis.techtarget.com/definition/MP3-MPEG-1-Audio-Layer-3#:~:text=MP3%20(MPEG%2D1%20Audio%20Layer%2D3)%20is%20a,quality%20when%20it%20is%20played.">https://whatis.techtarget.com/definition/MP3-MPEG-1-Audio-Layer.</a>
      </li>
      <li>Brain M., May 2021, <em>How MP3 Files Work</em>, HowStuffWorks, available from <a href="https://computer.howstuffworks.com/mp3.htm">https://computer.howstuffworks.com/mp3.htm</a>
      </li>
      <li>Bellis M., August 2019, <em>The History of MP3 Technology</em>, ThoughtCo., available from
        <a href="https://www.thoughtco.com/history-of-mp4-1992132">https://www.thoughtco.com/history-of-mp4-1992132</a>
      </li>
      <li>Velasco C. , May 2017, <em>The MP3 Is Dead: Here's A Brief History Of MP3</em>
, Tech Times, available from <a href="https://www.techtimes.com/articles/207213/20170513/the-mp3-is-dead-heres-a-brief-history-of-mp3.htm">https://www.techtimes.com/articles/207213/20170513/the-mp3-is-dead-heres-a-brief-history-of-mp3.htm</a>
      </li>
    </ol>
  </div>
  <div class="end">
    <a href="quiz.html">
      <button type="button">
        <span></span>
        TEST YOUR KNOWLEDGE
      </button>
    </a>
  </div>
  <footer>
    <div class="container">
      <div class="row">
        <div class="footer-col">
          <h4>Our Group Members</h4>
          <ul>
            <li><a href="mailto:103500095@student.swin.edu.au">103500095 - Rox Nguyen</a></li>
            <li><a href="mailto:103792850@student.swin.edu.au">103752850 - Kim Duong Pham</a></li>
            <li><a href="mailto:103848151@student.swin.edu.au">103848151 - William Chan</a></li>
            <li><a href="mailto:103844094@student.swin.edu.au">103844094 - Tashahud</a></li>
            <li><a href="mailto:100583828@student.swin.edu.au">100583828 - Giovanni Tripodi</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>
</html>