This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Streaming online audio and video has been given a massive injection of awesome. No longer is the online experience limited to two-channel stereo sound. Dolby Digital Plus, an advanced codec from Dolby, has been designed specifically to enhance the online experience by providing a high-fidelity, low-latency solution for streaming surround sound media, and the codec is built into Microsoft Windows 10 as standard.
No special tricks or dedicated plugins are required to experience surround sound through a web browser, because the Dolby Digital Plus codec is available to HTML5 audio and video elements just like any other codec. That means you can experience engaging Dolby surround sound media online today, assuming the web browser and operating system you are using supports the Dolby Digital Plus codec.
HTML5 Feature Detection
If you are a web developer, and you want to provide your users with surround sound media, you will need to make sure the Dolby Digital Plus codec is available. If the codec is unavailable, you will need to provide an alternative media stream.
Needless to say, users running Windows 10 and the Microsoft Edge browser will be able to enjoy Dolby surround sound media streams, but feature detection is required to provide content to the widest possible audience.
Modern web browsers can actually deal with feature detection on your behalf if you add media elements directly to the HTML document. The following HTML snippet will attempt to play a Dolby Digital Plus encoded video stream, and it will fall back to a standard stereo encoded video stream if the Dolby Digital Plus codec is unavailable.
1 |
<!-- A video player with standard playback controls -->
|
2 |
|
3 |
<video controls> |
4 |
|
5 |
<!-- Dolby Digital Plus -->
|
6 |
|
7 |
<source src='movie_1.m4v' |
8 |
|
9 |
type='video/mp4;codecs="avc1.42E01E,ec-3"'> |
10 |
|
11 |
<!-- One or more alternative formats (fallbacks) -->
|
12 |
|
13 |
<source src='movie_2.m4v' |
14 |
|
15 |
type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'> |
16 |
|
17 |
|
18 |
|
19 |
<div class='no-video-support'> |
20 |
|
21 |
<!-- The HTML5 <video> element is not supported -->
|
22 |
|
23 |
</div>
|
24 |
|
25 |
</video>
|
If you want to handle the feature detection with JavaScript, you can use the canPlayType function that is exposed by media elements.
1 |
var getDDSupport = function (callback) { |
2 |
|
3 |
|
4 |
|
5 |
if (video.canPlayType('audio/mp4;codecs="ec-3"') === '' || video.canPlayType('audio/mp4;codecs="ac-3"') === '') { |
6 |
|
7 |
|
8 |
|
9 |
supportDDPlus = false; |
10 |
|
11 |
callback(); |
12 |
|
13 |
|
14 |
|
15 |
} else { |
16 |
|
17 |
|
18 |
|
19 |
var audio = new Audio(); |
20 |
|
21 |
audio.muted = true; |
22 |
|
23 |
audio.addEventListener('error', function () { |
24 |
|
25 |
|
26 |
|
27 |
supportDDPlus = false; |
28 |
|
29 |
callback(); |
30 |
|
31 |
|
32 |
|
33 |
}, false); |
34 |
|
35 |
|
36 |
|
37 |
audio.addEventListener('seeked', function () { |
38 |
|
39 |
supportDDPlus = true; |
40 |
|
41 |
callback(); |
42 |
|
43 |
});
|
44 |
|
45 |
|
46 |
|
47 |
audio.src = '/assets/silence.mp4'; |
48 |
|
49 |
audio.play(); |
50 |
|
51 |
|
52 |
|
53 |
try { |
54 |
|
55 |
audio.currentTime = 2; |
56 |
|
57 |
} catch (e) { |
58 |
|
59 |
//eslint-disable-line no-empty
|
60 |
|
61 |
}
|
62 |
|
63 |
|
64 |
|
65 |
}
|
66 |
|
67 |
};
|
It is a simple as that. You can also check out the attached silence.mp4 file to use in your own testing. Note that the usage of the Silence.mp4 file is because some browsers return false-positives. If you have worked with HTML5 media elements before, you are probably already comfortable with that type of feature detection in web browsers.
Note: Dolby Digital Plus is not limited to video streams. You can provide standalone surround sound audio streams to your audience if you wish to do so.
Surround Sound
So, what is surround sound exactly? In a nutshell, a surround sound audio stream typically consists of six or eight individual sound channels. It provides a way to immerse the listener in a dynamic, 3D soundscape, and is the de facto standard for movie theaters and home entertainment systems. In contrast, a stereo audio stream only consists of two individual sound channels, and a mono audio stream consists of a single sound channel.
5.1 Surround Sound
5.1 surround sound audio streams consist of six individual sound channels.
The first three sound channels (LCR) are positioned in front of the listener, to the left, center and right. They provide the majority of the sound and are, for the most part, compatible with the standard stereo left and right sound channels. The center sound channel is typically used for dialog, but it also helps to keep sound centered when subtle panning occurs in a movie.
The next two sound channels (LS and RS) are positioned behind the listener. They provide the "surround" in a surround sound audio stream, and are typically used to enhance ambient soundscapes. If you imagine a movie scene in which someone is walking through a forest, the LS and RS sound channels may be used to provide additional sounds for bird calls, rustling leaves, gusts of wind, and so on.
Finally, the sixth sound channel (LFE) in a 5.1 setup is for low frequency effects. The primary purpose of the LFE channel is to provide low frequency sound, typically any frequencies below 120Hz, to one or more subwoofers. This channel can provide a physical chest-thumping experience to accompany large on-screen explosions, etc.
7.1 Surround Sound
7.1 surround sound audio streams extend 5.1 with the addition of two extra sound channels (CL and CR) which are placed either side of the listener, providing a total of eight individual sound channels. These two extra channels are typically used in conjunction with the front channels (LCR) to provide a much wider angle of sound.
Speaker Locations
The ideal positioning of surround sound speakers, relative to the listener, have been standardized by the International Telecommunication Union. The following image shows the ideal, standardized speaker positions.
The angle between the left (L) and right (R) speakers is 60 degrees, with the center (C) speaker placed directly in front of the listener. The left-surround (LS) and right-surround (RS) speakers are positioned approximately 110 degrees from the center (C) speaker. The position of the low frequency effects speaker (LFE), i.e. the subwoofer, isn't too important due to the low frequency limitation, but it is usually placed close to the listener, sometimes directly beneath the listener.
Audio Production
The production of surround sound audio streams is beyond the scope of this article, but a lot of modern sound editing software packages, including Audacity and Adobe Audition, allow you to create surround sound audio files and export them as WAV or AIFF files. The exported files can then be pushed through an encoder, or a service such as Microsoft Azure Media Encoder (see below), to produce high-fidelity Dolby Digital Plus audio and/or video files that are ready to be streamed over the internet.
Encoding With Microsoft Azure Media Encoder
Microsoft Azure Media Services provides an elegant, task-based solution for encoding Dolby Digital Plus audio and video online, and Microsoft has been awesome enough to provide everyone with a free trial of Azure. Beyond the free trial, the cost of encoding (as of writing) starts at $1.99 per GB, which is great value for money; you will no longer need to use expensive desktop software to get your fantastic Dolby Digital Plus surround sound out to the masses.
The following code describes the procedure required to programmatically encode a video file using the Azure services and the Dolby Digital Plus encoder, but it assumes you have some prior experience using the Azure services and the Media Services SDK for NET.
1 |
//
|
2 |
|
3 |
// Create the service context.
|
4 |
|
5 |
//
|
6 |
|
7 |
|
8 |
|
9 |
var context = new CloudMediaContext( |
10 |
|
11 |
new MediaServiceCredentials("accountName", "accountKey") |
12 |
|
13 |
);
|
14 |
|
15 |
|
16 |
|
17 |
//
|
18 |
|
19 |
// Create the latest version of the processor.
|
20 |
|
21 |
//
|
22 |
|
23 |
|
24 |
|
25 |
var proc = context.MediaProcessors. |
26 |
|
27 |
Where(p => p.Name == "Azure Media Encoder"). |
28 |
|
29 |
ToList(). |
30 |
|
31 |
OrderBy(p => new Version(p.Version)). |
32 |
|
33 |
LastOrDefault(); |
34 |
|
35 |
|
36 |
|
37 |
//
|
38 |
|
39 |
// Load the configuration file.
|
40 |
|
41 |
//
|
42 |
|
43 |
|
44 |
|
45 |
var conf = File.ReadAllText("ddp720.xml"); |
46 |
|
47 |
|
48 |
|
49 |
//
|
50 |
|
51 |
// Create the job.
|
52 |
|
53 |
//
|
54 |
|
55 |
|
56 |
|
57 |
var job = context.Jobs.Create("identifier"); |
58 |
|
59 |
var task = job.Tasks.addNew("identifier", proc, conf, TaskOptions.None); |
60 |
|
61 |
|
62 |
|
63 |
task.InputAssets.Add(asset); // Assumes 'asset' has been loaded elsewhere. |
64 |
|
65 |
task.OutputAssets.AddNew("identifier", AssetCreationOptions.StorageEncrypted); |
66 |
|
67 |
|
68 |
|
69 |
//
|
70 |
|
71 |
// Start the job.
|
72 |
|
73 |
//
|
74 |
|
75 |
|
76 |
|
77 |
job.StateChanged += new EventHandler<JobStateChangedEventArgs>(StateChanged); |
78 |
|
79 |
job.Submit(); |
80 |
|
81 |
job.GetExecutionProgressTask(CancellationToken.None).Wait(); |
82 |
|
83 |
|
84 |
|
85 |
var encoded = job.OutputMediaAssets[0]; // The encoded asset. |
86 |
|
87 |
|
88 |
|
89 |
//
|
90 |
|
91 |
// State change handler.
|
92 |
|
93 |
//
|
94 |
|
95 |
|
96 |
|
97 |
void StateChanged(object sender, JobStateChangedEventArgs e) { |
98 |
|
99 |
switch (e.CurrentState) { |
100 |
|
101 |
case JobState.Finished: { |
102 |
|
103 |
Console.WriteLine("Done!"); |
104 |
|
105 |
break; |
106 |
|
107 |
}
|
108 |
|
109 |
case JobState.Canceling: |
110 |
|
111 |
case JobState.Processing: |
112 |
|
113 |
case JobState.Queued: |
114 |
|
115 |
case JobState.Scheduled: { |
116 |
|
117 |
Console.WriteLine("Processing..."); |
118 |
|
119 |
break; |
120 |
|
121 |
}
|
122 |
|
123 |
case JobState.Canceled: |
124 |
|
125 |
case JobState.Error: { |
126 |
|
127 |
// Handle the error or cancellation.
|
128 |
|
129 |
break; |
130 |
|
131 |
}
|
132 |
|
133 |
default: { |
134 |
|
135 |
break; |
136 |
|
137 |
}
|
138 |
|
139 |
}
|
140 |
|
141 |
}
|
The configuration file, ddp720.xml, that is loaded into the program is as follows.
1 |
<?xml version="1.0" encoding="utf-8"?>
|
2 |
|
3 |
<Preset Version="5.0"> |
4 |
|
5 |
<Job /> |
6 |
|
7 |
<MediaFile
|
8 |
|
9 |
DeinterlaceMode="AutoPixelAdaptive" |
10 |
|
11 |
ResizeQuality="Super" |
12 |
|
13 |
AudioGainLevel="1" |
14 |
|
15 |
VideoResizeMode="Stretch"> |
16 |
|
17 |
<OutputFormat>
|
18 |
|
19 |
<MP4OutputFormat
|
20 |
|
21 |
StreamCompatibility="Standard"> |
22 |
|
23 |
<AudioProfile
|
24 |
|
25 |
Condition="SourceContainsAudio"> |
26 |
|
27 |
<DolbyDigitalPlusAudioProfile
|
28 |
|
29 |
Codec="DolbyDigitalPlus" |
30 |
|
31 |
EncoderMode="DolbyDigitalPlus" |
32 |
|
33 |
AudioCodingMode="Mode32" |
34 |
|
35 |
LFEOn="True" |
36 |
|
37 |
SamplesPerSecond="44000" |
38 |
|
39 |
BandwidthLimitingLowpassFilter="True" |
40 |
|
41 |
DialogNormalization="-31"> |
42 |
|
43 |
<Bitrate>
|
44 |
|
45 |
<ConstantBitrate
|
46 |
|
47 |
Bitrate="256" |
48 |
|
49 |
IsTwoPass="False" |
50 |
|
51 |
BufferWindow="00:00:00" /> |
52 |
|
53 |
</Bitrate>
|
54 |
|
55 |
</DolbyDigitalPlusAudioProfile>
|
56 |
|
57 |
</AudioProfile>
|
58 |
|
59 |
<VideoProfile
|
60 |
|
61 |
Condition="SourceContainsVideo"> |
62 |
|
63 |
<HighH264VideoProfile
|
64 |
|
65 |
BFrameCount="3" |
66 |
|
67 |
EntropyMode="Cabac" |
68 |
|
69 |
RDOptimizationMode="Speed" |
70 |
|
71 |
HadamardTransform="False" |
72 |
|
73 |
SubBlockMotionSearchMode="Speed" |
74 |
|
75 |
MultiReferenceMotionSearchMode="Balanced" |
76 |
|
77 |
ReferenceBFrames="False" |
78 |
|
79 |
AdaptiveBFrames="True" |
80 |
|
81 |
SceneChangeDetector="True" |
82 |
|
83 |
FastIntraDecisions="False" |
84 |
|
85 |
FastInterDecisions="False" |
86 |
|
87 |
SubPixelMode="Quarter" |
88 |
|
89 |
SliceCount="0" |
90 |
|
91 |
KeyFrameDistance="00:00:05" |
92 |
|
93 |
InLoopFilter="True" |
94 |
|
95 |
MEPartitionLevel="EightByEight" |
96 |
|
97 |
ReferenceFrames="4" |
98 |
|
99 |
SearchRange="64" |
100 |
|
101 |
AutoFit="True" |
102 |
|
103 |
Force16Pixels="False" |
104 |
|
105 |
FrameRate="0" |
106 |
|
107 |
SeparateFilesPerStream="True" |
108 |
|
109 |
SmoothStreaming="False" |
110 |
|
111 |
NumberOfEncoderThreads="0"> |
112 |
|
113 |
<Streams
|
114 |
|
115 |
AutoSize="False" |
116 |
|
117 |
FreezeSort="False"> |
118 |
|
119 |
<StreamInfo
|
120 |
|
121 |
Size="1280,720"> |
122 |
|
123 |
<Bitrate>
|
124 |
|
125 |
<ConstantBitrate
|
126 |
|
127 |
Bitrate="5200" |
128 |
|
129 |
IsTwoPass="False" |
130 |
|
131 |
BufferWindow="00:00:05" /> |
132 |
|
133 |
</Bitrate>
|
134 |
|
135 |
</StreamInfo>
|
136 |
|
137 |
</Streams>
|
138 |
|
139 |
</HighH264VideoProfile>
|
140 |
|
141 |
</VideoProfile>
|
142 |
|
143 |
</MP4OutputFormat>
|
144 |
|
145 |
</OutputFormat>
|
146 |
|
147 |
</MediaFile>
|
148 |
|
149 |
</Preset>
|
That configuration file produces a H.264 720p video with Dolby Digital Plus 5.1 surround sound. The EncoderMode attribute, "DolbyDigitalPlus", tells the encoder to use Dolby Digital Plus, and the AudioCodingMode, "Mode32", tells the encoder to use 5.1 surround sound. Also, the LFEOn attribute must be set to "True" to enable the low frequency effects (LFE) sound channel.
Additional information is provided in the Resources section at the end of this article.
Encoding With Adobe Premiere Pro
The latest versions of Adobe Premiere Pro provide support for Dolby Digital Plus, allowing you to mix 5.1 and 7.1 surround sound directly into your videos.
Additional information is provided in the Resources section at the end of this article.
Closing Thoughts
As an avid consumer of online audio and video, I'm excited by Dolby Digital Plus. We have now reached a point where true Dolby surround sound can be streamed over the internet, thanks to the impressive work by Dolby and the support of Microsoft.
Online games, oh yes, they can also benefit from Dolby surround sound, as demonstrated by the highly entertaining Lux Ahoy game, but remember, you will need to be running Windows 10 and Microsoft Edge for now!
Finally
There may be some controversy surrounding another proprietary web technology, but in all honesty, if proprietary technology allows companies like Dolby and Microsoft to provide us with codecs such as Dolby Digital Plus, you will not be hearing any complaints from me.
Resources
By
