YouTube 5.1 Channel Audio Fail in Browsers

Ignore any blog posts or YouTube videos that claim to show you how to play 5.1 surround from YouTube videos in a browser. They don’t work.

As of January, 2025, Chrome, Edge, and Safari all play multichannel audio just fine without any special settings. Try the audio tests yourself on this page, after you’ve configured your multichannel audio device to work with Windows 10/11 or Mac OS (see instructions below):

AAC Multichannel Playback Test - Fraunhofer IIS

Chrome and Edge play all of the audio files properly. Safari plays the first and third one (HE-AAC bitstream and AAC bitstream) but the rear channels don’t play on the second one (Original Wave File). 

YouTube, however, does not play multichannel audio in Chrome, Edge, or Safari browsers, and no option appears in the settings to select any other audio format like it does in the YouTube App on Google TV and other streaming devices. Try it yourself with this YouTube video encoded in 5.1 surround:

The BEST Dolby 5.1 Surround Sound Demo! Nature Sounds.

(Balu - Relaxing in Nature 4K channel)

The YouTube video does play 5.1 surround in the YouTube App on Google TV and Amazon Fire TV Stick 4K and 4K Max, which I have verified. My setup has HDMI ARC going to a Pioneer 7.1 receiver. It probably plays on Apple TV and Roku TV sticks as well, but I don’t have those to test.

Register feedback with YouTube. Maybe they’ll address this oversight. It’s a shame it doesn’t work because Google develops both the Chrome browser and YouTube. I suspect they don’t use the multichannel capability built into the Chrome and Edge browsers because they use their own audio API and it isn’t a priority because not a lot of people have multichannel audio devices connected to their computers.

Windows 10 and 11 Multichannel Audio Device Configuration

Go to the Sound Control Panel or Manage Audio Devices (they are the same thing). There are a few ways to get there.

- Right-click the sound icon in the taskbar and select “Open Sound settings” or do a Windows Search for “Sound settings”). Select “Sound Control Panel” on the right. If it’s not visible, drag the dialog larger until you see it.

- Or do a Windows Search for “Control Panel.” In the “Search Control Panel” box, enter “Manage audio devices” and select the “Manage audio devices” link under Sound.

Under the Playback tab, select your multichannel audio device and click the Configure button. Select 5.1 Surround and the Next button. Check the boxes next to all the speakers you have. Test the speakers by clicking on the icon for each one. Click Next and set the full-range speakers. If you have big speakers in front but not in back, select just the front ones as full-range. If they’re all the same size, select them all. Click Next and Finish and OK to save your settings.

Be sure to select the multichannel audio device as your output device. Right-click the sound icon in the taskbar, Select “Open Sound settings,” and make sure “Choose your output device” shows the multichannel audio device.

Mac OS 15 (Sequoia) Multichannel Audio Device Configuration

Go to Audio MIDI Setup by doing a Spotlight search (Cmd + Spacebar) for “Audio MIDI Setup” or go to the Finder menu > Go > Utilities > Audio MIDI Setup.

Find the multichannel audio (Output) device and set the Format to the number of channels you will use. For 5.1, set it to 6-channel. Select the “Configure Speakers...” button. Set Configuration to something like 5.1. Test the speakers by clicking to icon on each channel. Click Done.

Be sure you are using the multichannel audio device you set up as your audio output.

DBeaver vs. SQL Developer: DBeaver fail!

DBeaver claims to be the best database editor. Thanks to some bad UI, something as simple as switching the database schema in the SQL editor is impossible. This is one of the most common activities for anyone using a database manager and SQL editor. You want to run your saved SQL script against a different database or schema. In SQL Developer, this is as simple as can be. Just select the different schema from the dropdown. In DBeaver, you can't. Select the database displayed at the top of the editor by double-clicking or pressing Ctrl+0. It displays a popup that maddeningly shows all the other schemas but you can't actually select them. I'm not sure why there is a popup showing the other schemas in DBeaver. You can see them all in the database navigator in the sidebar. It seems the popup was designed to allow selecting a different schema but there are no buttons, no instructions explaining how to select a different schema, and apparently no functionality in this popup other than to see the databases that you can't select. They sit there and taunt you. It should be as simple as clicking on one and selecting a button like "Select" or even double-clicking on one to select it, but no buttons appear and you can click until your fingers are sore and nothing happens. For the complete failure to implement the most basic and common functionality, DBeaver earns a massive fail.

Update: it turns out that you can select a different database schema in the "Choose catalog/schema" dialog that pops up when you select it at the top of the editor window or press Ctrl+0. Click on the database in the left pane then double-click on the schema in the right pane, which closes the dialog and selects the other database.

This is about as bad as UI gets. No buttons, no titles at the top of the panes describing what they are, no hints as to what this page does or how to select a different database and schema. Clearly designed by a software engineer with a penchant for using Easter Eggs instead of useful UI. Obviously not designed by a UX person. Still a massive fail for DBeaver, even though the ability to switch databases is technically there. It just requires trying everything under the sun to discover the Easter Egg embedded in this page. Utterly awful.

Set Cmder (ConEmu) console emulator to open new tab in current directory with Bash shell

Windows is a truly bad operating system for almost everything except games. Unfortunately sometimes we have to use it for web development. If you're coming from a Linux/Mac environment, the operating systems of choice for web development because Linux servers dominate the Internet, the command line options in Windows are barbaric. The Windows developers have finally seen the light—after more than 20 years—and are working on incorporating native Linux with the Windows Subsystem for Linux project.

In the meantime, a popular console emulator that mimics Linux on Windows is Cmder, which is running ConEmu under the covers. I recommend downloading the Full version that includes Git for Windows since most developers are using Git and GitHub for project version control.

Cmder gives you back the the most common, familiar Linux commands. If you've been using the MacOS Terminal, you're used to opening a new tab in the current working directory with Cmd+T. Unfortunately Cmder doesn't do this be default and figuring out how to do it is maddeningly difficult. Thanks to this tip, I will explain how to do it.

ConEmu offers several choices for consoles, like the old-school cmd, the newer PowerShell, and Bash. I use {Bash::Git bash} as my preferred console.

You have a lot of control of the commands it runs when it opens a new window. You can find them under Settings (Win+Alt+P) > Startup and Settings > Startup > Tasks.

To use hotkey Ctrl+T to open a new tab with the Bash shell in the current directory, rather than the default directory:

1. Go to Settings > Startup > Tasks
2. Select the {Bash::Git bash} option
3. Set the Hotkey to Ctrl+T
4. Modify the command to start with -new_console:d:"%CD%"
5. Save settings

The d: option sets the startup directory and the "%CD%" option uses the current directory.

In order for it to read the current directory into environment variable %CD%, you have to enable it in your .bash_profile or .bashrc startup script. In ~/.bash_profile add this:

if [[ -n "${ConEmuPID}" ]]; then
  export PROMPT_COMMAND='ConEmuC -StoreCWD'
fi

See also:

Cmder documetation on GitHub
Cmder wiki
ConEmu documentation

Set zsh (zshell) colors for ls command

Catalina uses zsh (zshell) instead of the old bash or (even older) sh. To set colorized display of files and directories when using the ls command, modify ~/.zprofile or ~/.zshrc with something like:

export CLICOLOR=1
export LSCOLORS=CxFxExDxBxegedabagaced

When you run the ls command, it will display the files colorized according to their type like this:

Setting CLICOLOR to 1 enables colorization. Setting LSCOLORS to the string shown sets the colors for the different file types.

For a detailed explanation of the attributes and colors and how they are set, see:

How to enable colorized output for ls command in MacOS X Terminal

Set zsh (zshell) prompt in Mac OS Catalina terminal

Catalina uses zsh (zshell) instead of the old bash or (even older) sh. To set the command prompt, modify ~/.zprofile or ~/.zshrc with something like:

#--------------------ZSH script commands--------------------#
#  %B  Bold on
#  %b  bold off
#  %F  color on, %F{green} or %F{2}
#  %f  color off
#  %D  date with strftime options in {}
#      %a  weekday 3-letter abbreviation (Mon)
#      %x  locale date (09/30/13)
#      %X  locale time (07:06:05)
#  %n  user
#  %m  machine
#  %/  directory path
#  %#  show % unless elevated privileges (sudo), then show #
#  $'\n'  newline
#
#-----------------------------------------------------------#

PROMPT="%B%F{green}%D{%a %x %X} %F{red}%n%F{white}@%F{cyan}%m %F{yellow}%/%f %#"$'\n'"> "

This will generate a prompt that looks like this, with the command prompt on the next line down:

You can use either PS1 or PROMPT. PS1 may be set in /etc/zshrc and it will override your setting. To disable it, edit /etc/zshrc and comment out the PS1 line. You may have to use sudo vim and write your changes with w! (and exit with q!) because the permissions may be set to read-only for everyone.

For a detailed explanation of setting the prompt in zsh, see:

zsh Prompt Expansion
Customizing the zsh prompt

For a list of 256 colors whose numeric values you can use in place of red, green, yellow, blue, magenta, cyan, and white, see:

256 Colors Cheat Sheet

Here's a strftime reference for options to include with %D for date and time formatting:

Python's strftime directives

Key event handlers in Vue

What I learned about setting event handling for keys in Vue is:

1. Add the v-on directive (shorthand is @) to the element (for example; @keyup, @keydown).


2. Set focus on the element (add the property tabindex="0").


3. To set focus programmatically with .focus(), if the action or event that initiated the change in focus causes the DOM to change (it usually does) you must set focus using $nextTick to wait for the DOM to update first.

<div class="notify-item-list" v-for="(entry, index) in category.entries" :key="entry.id">
    <a href="#" @click="selectItem(category.entries, index)" class="text-black" :class="{ 'text-bold': isUnread(entry) }">{{ entry.title }}</a>
    <div id="notification-modal" tabindex="0" ref="notifyModal" @keyup="navKeys" class="item-detail modal" :class="{ 'is-active': showItemDetail(entry) }">

methods: {
    selectItem: function ( entries, index ) {
        this.selectedItemIndex = index;
        this.$nextTick( () => {
            let input = this.$refs.notifyModal[index];
            input.focus();
        }),
    navKeys: function ( e ) {
        switch( e.keyCode ) {
            case 27: // esc
                this.hideItemDetail();
                break;
            case 37: // left
                this.prevNotificationDetail(this.category.entries);
                break;
            case 39: // right
                this.nextNotificationDetail(this.category.entries);
                break;
        }
    }
}

It’s a little more involved when multiple similar elements are created with the v-for directive, but you can simplify it by adding the ref="whatever" attribute, then use the index of the array to find the right object and its $refs.whatever, for example this.$refs.whatever[index]. Here’s a discussion of how to do this with v-for:

https://laracasts.com/discuss/channels/vue/vue-set-focus-to-input-created-by-v-for?page=1

See the 4th, 5th, and 6th replies by Kazuya.Gosho, MacPrawn and lukas.pierce. The last one was the most helpful. Anyway, it works like a charm. Feels a little kludgy, but considering how the user is interacting with the DOM it makes sense.

Mimic PC NumLock on Mac with 101/102 Key PC Keyboard

I use a MacBook Pro with a leftover Dell 102-key PC keyboard. For almost everything it works great. Even the volume keys work. However, the NumLock doesn't behave the way it does on a PC.

I mostly use the number pad on the right to move the cursor around for editing. It makes editing really fast because the cursor keys are easily reached; just like using the A,S,D,W keys for navigating in a video game. I rarely use the number pad for entering numbers; just when I have a long series of number I want to rapidly input. If it's only one or two numbers, I use the number keys at the top of the keyboard. Using the NumLock key to switch back and forth between cursor control and number entry is extremely handy, but the Apple keyboard doesn't have this feature.

Karabiner to the rescue

I found a popular keyboard-mapping utility for Mac called Karabiner. It allows me to remap the keyboard for specific keyboards, so I can map the keypad 0-9 keys to cursor movement for just the Dell keyboard; however I can't quickly switch back to the default functions.

Map NumLock to toggle between keyboard profiles

The solution is to create 2 keyboard profiles. I modified the "Default profile" to map the keypad keys for cursor movement and created another profile, "NumLock On" that reverts to the original function of the keypad keys for number entry. Then I mapped the NumLock key to run a shell_command calling Karabiner from the command line and loading the other profile. You can see the way it's set up in ~/.config/karabiner/karabiner.json. Here is the relevant code:

    {   
        "from": {
            "key_code": "keypad_9"
        },
        "to": {
            "key_code": "page_up"
        }
    },
    {
        "from": {
            "key_code": "keypad_num_lock"
        },
        "to": {
            "shell_command": "'/Library/Application Support/org.pqrs/Karabiner-Elements/bin/karabiner_cli' --select-profile 'NumLock On'"
        }
    },
    {
        "from": {
            "key_code": "keypad_period"
        },
        "to": {
            "key_code": "delete_forward"
        }
    }

The key_code, "keypad_num_lock", in the profile, "Default profile", is mapped to a "shell_command" which runs the Karabiner command-line interface (cli) and selects the "NumLock On" profile.

In the "NumLock On" profile, keypad_num_lock also runs the Karabiner cli but selects the "Default profile", like this:

     {
         "from": {
             "key_code": "f12"
         },
         "to": {
             "consumer_key_code": "volume_increment"
         }
     },
     {
         "from": {
             "key_code": "keypad_num_lock"
         },
         "to": {
             "shell_command": "'/Library/Application Support/org.pqrs/Karabiner-Elements/bin/karabiner_cli' --select-profile 'Default profile'"
         }
     }

For more on Karabiner, see:

Karabiner Manual

Karabiner JSON Reference Manual