Sound
Digital Audio Objectives
Preparation
Assignments
Project 1 - record and edit live audio
- ISTs will discuss audio in the digital domain vs the analog domain.
- ISTs will discuss sample rate and sampling resolution.
- ISTs will discuss bitrate and its effect on quality.
- ISTs will capture audio from a microphone and edit it using a waveform editor.
- ISTs will save audio in different file formats and compare file size and quality.
- ISTs will discuss Web 2.0 audio sites like SoundCloud and SoundTrap.
- ISTs will discuss the role of artificial intelligence on sound production (e.g. Soundraw)
Preparation
- Read the SOUND module of Digital Media Basics and complete all tasks outlined there including the quiz at the end.
- Download the free software Audacity and install it. Only download Audacity from the official web site. There are fake versions online that install viruses. Use this link: AudacityTeam.org
- Download and install the FFMPEG library to allow Audacity to open MP4 files and extract the audio.
- Please note: in your audio work you will likely encounter files in mp3 format and also some in m4a format. The m4a format supports Digital Rights Management so often these files are copy-protected. The mp3 file format does not support digital rights management.
Assignments
Project 1 - record and edit live audio
- Record a musical phrase with your voice or instrument using the microphone on your computer and Audacity.
- Save the editable original on your hard drive then save periodically to preserve your work.
- Export a backup of your recording in AIFF format before you make any further changes.
- Apply the noise reduction technique learned in class.
- Apply reverb and other effects as desired.
- Then export files in AIFF, WAV, MP3 160kbps, and MP3 32kbps.
- Audition your new files in the Finder and compare the quality.
Project 2 - create an annotated collage of existing and new audio
|
Project 2 Model (Action Adventure Music)
Notes for Project 2
|
Project 3 - (Advanced students only) This optional project is to create a simple listening map to guide students through a work of music and allow them to navigate freely among the sections. See the example posted at the bottom of this page for more details. Code editing is involved.
Project 4 - (highly optional) Use splitter.ai to take a stereo mp3 file and separate it into stem tracks. The artificial intelligence involved in this software is still experimental.
Creating Sound
Sound can be created with the microphone on your computer or you can use sound already on the web. If you create a sound file, you can use the Media-->File widget in Weebly to upload the file from your hard drive to your Weebly site where users can download it by clicking a link. Here are three examples you may download and manipulate within Audacity.
Sound can be created with the microphone on your computer or you can use sound already on the web. If you create a sound file, you can use the Media-->File widget in Weebly to upload the file from your hard drive to your Weebly site where users can download it by clicking a link. Here are three examples you may download and manipulate within Audacity.
|
|
|
Embedding an audio player for your audio file (optional advanced activity)
With a little code, you can create an embedded audio player for any audio files you upload to Weebly. First do a normal file upload using the File widget. Then publish and obtain the URL of the audio file you just uploaded. Then use the Embed Code widget in the Weebly toolbar and add the following code. Be sure to replace the URL in the code below with URL of your sound file.
<audio controls loop src="https://digitalmediabasics.weebly.com/uploads/2/1/1/3/21131416/acoustigroove_1.mp3" style="width:100%;"></audio>
The result is below showing a player for the Acoustic Groove Loop.
With a little code, you can create an embedded audio player for any audio files you upload to Weebly. First do a normal file upload using the File widget. Then publish and obtain the URL of the audio file you just uploaded. Then use the Embed Code widget in the Weebly toolbar and add the following code. Be sure to replace the URL in the code below with URL of your sound file.
<audio controls loop src="https://digitalmediabasics.weebly.com/uploads/2/1/1/3/21131416/acoustigroove_1.mp3" style="width:100%;"></audio>
The result is below showing a player for the Acoustic Groove Loop.
Embedding a video player for media from other sites
You can also embed sound (video actually) from Web 2.0 sites like YouTube and TeacherTube among others. For YouTube, while viewing the video, click the Share button and copy the link presented. Then use the YouTube widget in the Weebly editor to embed the video into your page. To embed content from TeacherTube and other sites, copy the embed code from the source web site and then drag an "Embed Code" widget into your page in Weebly and paste the embed code. Below is an example embed from YouTube.
You can also embed sound (video actually) from Web 2.0 sites like YouTube and TeacherTube among others. For YouTube, while viewing the video, click the Share button and copy the link presented. Then use the YouTube widget in the Weebly editor to embed the video into your page. To embed content from TeacherTube and other sites, copy the embed code from the source web site and then drag an "Embed Code" widget into your page in Weebly and paste the embed code. Below is an example embed from YouTube.
|
|
Project 3 - Creating a simple listening map (optional advanced activity)
Advanced students may wish to create a listening map to guide visitors through a work of music. The listening map will contain navigation buttons and an audio player to allow visitors to skip to each section of the audio file. Here is an mp3 of Joplin's Maple Leaf Rag uploaded using Weebly's file widget. Below is a simple listening map that shows an audio player and navigation buttons. |
|
Listening Map for Joplin’s Maple Leaf Rag
Here is a simple application to help you navigate the sections of Joplin’s Maple Leaf Rag.
Download and study the HTML code below. This is all the code needed for a simple listening map along with some style rules. Make a copy of the code, edit the audio file url and other text as directed in the file. To edit the code, use TextEdit (set preferences for plain text) or any plain text editor like BBEdit.
Project 3 - Step by Step
<style>
/*
You can change the colors in the style section below.
Here are 140 named color values you can use in your styling.
AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen
*/
.audioappwrap {font-family:Georgia, serif;font-size:1.1rem;padding:20px;text-align:center;color:black;background:white;}
.audioappwrap h1 {font-family:Verdana, sans-serif;font-size:2rem;width:100%;text-align:center;
margin:0;padding:0;padding-top:5px;padding-bottom:5px;
color:white; background:teal; border:2px solid DimGrey; }
.audioappwrap p {line-height:1.2;}
.audioappwrap audio {width:100%;margin-bottom:20px;min-height:80px;}
.audioappwrap button {-webkit-appearance:none;width:15%;margin:2%;height:auto;min-height:40px;
border-radius:12px;cursor:pointer;
font-size:1.5rem;
color:white; background-color:teal; border:2px solid DimGrey; }
.audioappwrap button:hover {background-color:silver; color:teal;}
#nowplaying {font-size:3rem;}
</style>
<div class="audioappwrap">
<!--Edit this text:-->
<h1>Listening Map for Joplin’s <em>Maple Leaf Rag</em></h1>
<p>
<!--Edit this text:-->
Here is a simple application to help you navigate the sections of Joplin’s <em>Maple Leaf Rag.</em>
</p>
<!-- Edit the web address in the src attribute within the audio element. -->
<audio id="myaudioplayer" controls src="https://digitalmediabasics.weebly.com/uploads/2/1/1/3/21131416/rag_1.mp3"></audio>
<!-- Add or remove buttons as needed in the code. Edit the text between each button tag pair.-->
<p>
<button onclick="playSection(0)">A section</button>
<button onclick="playSection(1)">B section</button>
<button onclick="playSection(2)">A' section</button>
<button onclick="playSection(3)">C section</button>
<button onclick="playSection(4)">D section</button>
</p>
<p id="nowplaying"></p>
</div>
<script>
/* Edit markers and markertext.
The marker numbers are the location in seconds of each section of your music.
Be sure to include the total duration of the audio as the last item in markers.
The markertext entries are the names of the sections.
*/
var markers = [0,43,87,109,152,210];
var markertext = ["A","B","A'","C","D"];
// Don't edit anything below
var audioplayer = document.getElementById("myaudioplayer");
var nowplaying = document.getElementById("nowplaying");
function playSection(x){
audioplayer.play();
audioplayer.currentTime = markers[x];
}
audioplayer.addEventListener("timeupdate",showSection,false);
function showSection(e){
var ct = audioplayer.currentTime;
for (var i=1;i<markers.length;i++){
if (ct >= markers[i-1] && ct < markers[i]){
var mt = markertext[i-1];
nowplaying.innerHTML = "Now playing: " + mt;
}
}
}
</script>
- Upload an audio file to your Weebly site or other location. Obtain the URL of the uploaded file.
- Copy the code seen below.
- Edit your file using BBEdit. The editable sections are marked within the template.
- Drag an Embed Code widget to your page. Click it and paste your edited copy of the code seen below.
<style>
/*
You can change the colors in the style section below.
Here are 140 named color values you can use in your styling.
AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen
*/
.audioappwrap {font-family:Georgia, serif;font-size:1.1rem;padding:20px;text-align:center;color:black;background:white;}
.audioappwrap h1 {font-family:Verdana, sans-serif;font-size:2rem;width:100%;text-align:center;
margin:0;padding:0;padding-top:5px;padding-bottom:5px;
color:white; background:teal; border:2px solid DimGrey; }
.audioappwrap p {line-height:1.2;}
.audioappwrap audio {width:100%;margin-bottom:20px;min-height:80px;}
.audioappwrap button {-webkit-appearance:none;width:15%;margin:2%;height:auto;min-height:40px;
border-radius:12px;cursor:pointer;
font-size:1.5rem;
color:white; background-color:teal; border:2px solid DimGrey; }
.audioappwrap button:hover {background-color:silver; color:teal;}
#nowplaying {font-size:3rem;}
</style>
<div class="audioappwrap">
<!--Edit this text:-->
<h1>Listening Map for Joplin’s <em>Maple Leaf Rag</em></h1>
<p>
<!--Edit this text:-->
Here is a simple application to help you navigate the sections of Joplin’s <em>Maple Leaf Rag.</em>
</p>
<!-- Edit the web address in the src attribute within the audio element. -->
<audio id="myaudioplayer" controls src="https://digitalmediabasics.weebly.com/uploads/2/1/1/3/21131416/rag_1.mp3"></audio>
<!-- Add or remove buttons as needed in the code. Edit the text between each button tag pair.-->
<p>
<button onclick="playSection(0)">A section</button>
<button onclick="playSection(1)">B section</button>
<button onclick="playSection(2)">A' section</button>
<button onclick="playSection(3)">C section</button>
<button onclick="playSection(4)">D section</button>
</p>
<p id="nowplaying"></p>
</div>
<script>
/* Edit markers and markertext.
The marker numbers are the location in seconds of each section of your music.
Be sure to include the total duration of the audio as the last item in markers.
The markertext entries are the names of the sections.
*/
var markers = [0,43,87,109,152,210];
var markertext = ["A","B","A'","C","D"];
// Don't edit anything below
var audioplayer = document.getElementById("myaudioplayer");
var nowplaying = document.getElementById("nowplaying");
function playSection(x){
audioplayer.play();
audioplayer.currentTime = markers[x];
}
audioplayer.addEventListener("timeupdate",showSection,false);
function showSection(e){
var ct = audioplayer.currentTime;
for (var i=1;i<markers.length;i++){
if (ct >= markers[i-1] && ct < markers[i]){
var mt = markertext[i-1];
nowplaying.innerHTML = "Now playing: " + mt;
}
}
}
</script>