Control Keys

→ move to next slide (also Enter or Spacebar).
← move to previous slide.
 d  enable/disable drawing on slides
 p  toggles between print and presentation view
CTRL  +  zoom in
CTRL  -  zoom out
CTRL  0  reset zoom

Slides can also be advanced by clicking on the left or right border of the slide.

Audio

Audio Data

  • An audio signal (such as speech or music) is typically created by a sound wave that is traveling through air and can be converted into an analogue electrical signal by a microphone
  • Nowadays these analogue signals are no longer stored directly (e.g. grooves engraved on a vinyl record, or a magnetization of a tape) but stored in digital form
  • For this purpose, the analog electrical signal is digitalized (i.e., sampled and quantized)

Digitizing Audio

  • The amount of data required to store the signal (or data rate to transmit it) depends on
    • sampling rate (how often a sample is taken)
    • quantization of the signal (how many bits are used for the binary encoding of a sample)
sampling
Signal
Digitized signal
Time

Digitizing Audio

  • Examples
    • Sampling rate: 48000 Hz, quantization: 16 bits, data rate: 768 kbit/s
      Male Voice Concert
    • Sampling rate: 48000 Hz, quantization: 8 bits, data rate: 384 kbit/s
      Male Voice Concert
    • Sampling rate: 6000 Hz, quantization: 16 bits, data rate: 96 kbit/s
      Male Voice Concert
Source: Sound Quality Assessment Material CD, European Broadcasting Union (EBU), non-commercial usage only

Audio Compression

  • Audio compression can greatly reduce the required data rate
  • Example: MP3 coding (MPEG 1, Layer 3), reduces audio by a factor of approx. 10 (at same quality)
    • Original (data rate: 768 kbit/s)
      Male Voice Concert
    • MP3 (data rate: 64 kbit/s)
      Male Voice Concert
Source: Sound Quality Assessment Material CD, European Broadcasting Union (EBU), non-commercial usage only

Video

Video

  • In the past, time-varying ("moving") images were captured with analog film cameras, which exposed individual frames of a film strip one after the other
  • By rapidly playing back the individual frames, a human observer gets the impression of a continuous ("smooth") motion
  • Today, instead of film strips, images are usually captured directly by a matrix of pixels on a CCD or CMOS image sensor

Video Data Size

  • The amount of data required to store a video signal is given by
    • resolution of the frames
    • quantization (how many bits are used to binary encode a pixel)
    • temporal sampling rate (FPS = "frames per second")
video

Video Data Size

  • Example:
    • Resolution: 1920 x 1080 pixels
    • Quantization: 24 bits (8 bits per color channel)
    • Temporal sampling rate: 24 FPS
  • A video of 90 minutes would need approx. 800 GB of storage
  • Therefore, digital videos are almost always stored (or transmitted) in a compressed format

FPS

  • The question is what temporal sampling rate is required for a human viewer to get the impression of a continuous ("smooth") motion
  • Is 1 FPS enough?
Quelle: Big Buck Bunny; Creative Commons License

FPS

  • Or 4 FPS?
Quelle: Big Buck Bunny; Creative Commons License

FPS

  • 12 FPS?
  • 12 FPS is already reasonably "smooth"
  • However, it depends on the shown content
Quelle: Big Buck Bunny; Creative Commons License

FPS

  • Here the 24 FPS version:
  • 24 FPS is common for movies shown in cinemas
  • Current movies are occasionally shown with 48 FPS (e.g., The Hobbit, Avatar)
Quelle: Big Buck Bunny; Creative Commons License

Video and Audio on Websites

  • Since HTML5 there is the <audio> and <video> tag
  • The browsers do not support all video formats:
    • Most recent browsers (Safari, Chrome, Edge, Firefox etc.) can play MP4 video (H.264)
    • The older versions of the browsers sometimes only play OGV video or VP8 (WebM)
  • The <video> or <audio> tag allows to specify several alternative sources

HTML5 <audio> / <video> Tag 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Audio and Video</title>
</head>
<body>
  <h1>Video</h1>
  <video preload controls>
    <source src="./bunny.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="./bunny.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="./bunny.mp4" type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
    <p> HTML5 video tag not supported </p> 
  </video> 
  <h1>Audio</h1>
  <audio controls> 
    <source src="./song.m4a" type="audio/x-aac" />
    <source src="./song.mp3" type="audio/mpeg" />
    <source src="./song.ogg" type="audio/ogg" /> 
    <p> HTML5 audio tag not supported </p> 
  </audio>
</body>
</html>

Are there any questions?

questions

Please notify me by e-mail if you have questions, suggestions for improvement, or found typos: Contact

More lecture slides

Slides in German (Folien auf Deutsch)

Legal Notice, Privacy Policy,