내레이터를 사용한 오디오 설명

완료됨

음성 합성은 오랜 기간 사용된 로봇 음성 및 부자연스러운 발음을 거쳐 먼 길을 걸어왔습니다. 내레이터는 시각 장애가 있는 사용자에게 큰 도움이 될 수 있는 Windows용 기본 제공 화면 읽기 프로그램을 제공합니다. 하지만 이 프로그램을 제대로 사용하도록 앱을 구성해야 합니다.

이 단원에서 학습할 내용은 다음과 같습니다.

  • 내레이터를 켜고 특정 내레이션 특성 없이 앱에서 테스트하는 방법.
  • 앱에 특정 특성을 추가하여 내레이션의 유창성을 개선하는 방법.
  • 올바르게 들리도록 문자열 및 메시지에서 산만한 부분을 정리하는 방법.
  • 내레이션의 이 간격은 음성 신시사이저의 사용자 지정 인스턴스로 채울 수 있습니다.

내레이터

공학용 계산기 앱이 실행 중인지 확인합니다. 내레이터를 사용하여 사용자를 위한 최상의 환경을 제공하는지 확인하려면 XAML 및 코드 숨김을 변경해야 합니다.

내레이터 켜기 및 테스트

  1. Windows 검색 창에 “내레이터 설정”을 입력한 후 접근성 내레이터 설정을 선택합니다. 다음 화면이 표시됩니다.

Turning on the narrator.

  1. 내레이터 사용 스위치를 켠 후 이 창을 최소화합니다. 앱 간에 전환하고 소프트웨어를 개발할 때 내레이션이 더 문제가 될 수 있으므로, 이 창을 열어 두려고 합니다. 이런 방식으로 코드를 변경할 때 스위치를 끈 후 테스트를 위해 다시 사용하도록 설정할 수 있습니다.

  2. 계산기의 상수 표시 단추의 계산기를 강조 표시하고 내레이터에서 설명을 처리하는 방법을 확인합니다. 상수 표시(일시 중지) 단추. 최대한 유용한 설명을 만드는 작업에서 내레이터를 지원하려고 합니다. 즉, 기본 제공 기능을 사용합니다. 해당 기능 중 하나는 UI 요소 형식(이 경우 “단추”)을 알리는 것입니다.

  3. 이제 Sqrt 단추를 선택하고 발음을 확인합니다. "Sqrt"는 수학에서 제곱근을 쓰는 일반 약식 형태이나, 내레이터는 이 단어를 모릅니다. 마찬가지로, 특히 특정 용어를 일반 영어 단어처럼 발음할 수 있는 경우 Sin, Asin, Acos 등을 인식하지 못합니다. 이 발음을 가져오는 작업에서 내레이터를 지원해야 합니다.

  4. 다양한 다른 단추(작업, 숫자)를 선택하고 내레이션이 얼마나 잘 처리되는지 확인합니다. 잘 처리되는 영역이 있고 개선이 필요한 영역도 있습니다.

  5. 상수 표시 단추로 돌아가서 단추를 선택하고, 다양한 상수 자체를 선택한 후, 내레이션을 기록해 둡니다. 여러 가지 상수를 선택하고 발음의 유용성을 평가합니다. 약간 게을러서 약식(예: "Gms", "Ozs", "Cms" 등)을 입력하는 경우 발음이 유용하지 않습니다. 사용자가 약식 용어를 이해할 수 없다면 해당 용어는 유용하지 않습니다.

  6. 마지막으로 다음 계산을 입력합니다. SqrtAtan0.5. =을 선택하지 않고, 계산의 텍스트 표시를 선택한 후, 내레이터가 어떻게 처리하는지 확인합니다. 이제 = 키를 눌러 텍스트 표시를 다시 선택합니다. 다행히도 내레이터는 긴 숫자를 매우 잘 처리할 수 있습니다.

  7. 내레이터 설정 창을 열고 지금은 내레이션을 끕니다.

계산기를 사용한 내레이터 테스트의 경우 분명히 작동하는 데 수학 함수, 수치 연산 및 상수 목록의 명확성이라는 몇 가지 문제가 있습니다.

텍스트 문자열을 자연스럽게 만들기

이 섹션에서는 계산기 기능을 사용하는 경우 내레이터가 자연스럽게 들리도록 도와줍니다. Visual Studio에서 공학용 계산기 프로젝트가 열려 있는지 확인합니다.

  1. UI 요소가 강조 표시되고 내레이션되는 경우 내레이터는 먼저 AutomationProperites.Name 속성이 있는지 테스트합니다. 이 속성이 있으면 사용되는 단어 또는 구입니다. 이 속성이 없으면 Content 속성이 대신 사용됩니다. 따라서 잘 발음되지 않는 모든 UI 요소의 경우 분명히 발음할 수 있는 이름과 함께 AutomationProperites.Name 속성을 추가해야 합니다. MainPage.xaml 파일에서 각 xaml 항목에 다음 이름 속성을 추가합니다. 긴 목록이므로 시간을 내어 항목을 하나씩 추가해야 합니다. 아래 목록에서 잘라내어 붙여넣거나 Visual Studio의 빠른 특성 입력 기능을 사용합니다.
 <Button x:Name="ButtonNMemoryPlus" AutomationProperties.Name="Memory plus" Content="M+"
 <Button x:Name="ButtonNMemoryMinus" AutomationProperties.Name="Memory minus" Content="M-"
 <Button x:Name="ButtonNMemoryMultiply" AutomationProperties.Name="Memory times" Content="M*"
 <Button x:Name="ButtonNMemoryDivide" AutomationProperties.Name="Memory divided by" Content="M/"
 <Button x:Name="ButtonLeft" AutomationProperties.Name="Open" Content="("
 <Button x:Name="ButtonSqrt" AutomationProperties.Name="Square root" Content="Sqrt"
 <Button x:Name="ButtonPow" AutomationProperties.Name="to the Power of" Content="^"
 <Button x:Name="ButtonPi" AutomationProperties.Name="Pi" Content="&#928;"
 <Button x:Name="ButtonRight" AutomationProperties.Name="Close" Content=")"
 <Button x:Name="ButtonArcsine" AutomationProperties.Name="Arc sine" Content="Asin"
 <Button x:Name="ButtonArccosine" AutomationProperties.Name="Arc cosine" Content="Acos"
 <Button x:Name="ButtonArctangent" AutomationProperties.Name="Arc tangent" Content="Atan"
 <Button x:Name="ButtonSin" AutomationProperties.Name="Sine" Content="Sin"
 <Button x:Name="ButtonCos" AutomationProperties.Name="Cosine" Content="Cos"
 <Button x:Name="ButtonTan" AutomationProperties.Name="Tangent" Content="Tan"
 <Button x:Name="ButtonNegative" AutomationProperties.Name="Negative" Content="-N"
 <Button x:Name="ButtonPlus" AutomationProperties.Name="plus" Content="+"
 <Button x:Name="ButtonMinus" AutomationProperties.Name="minus" Content="-"
 <Button x:Name="ButtonMultiply" AutomationProperties.Name="times" Content="*"
 <Button x:Name="ButtonDivide" AutomationProperties.Name="divided by" Content="/"
 <Button x:Name="ButtonEquals" AutomationProperties.Name="equals" Content="="
 <TextBox x:Name="TextDisplay" AutomationProperties.Name="Calculation"
 <Button x:Name="ButtonClr" AutomationProperties.Name="Clear" Content="Clr"
 <Button x:Name="ButtonDel" AutomationProperties.Name="Delete" Content="Del"
   />
  1. 그런 다음, 상수 목록의 산만한 부분을 해결해 보겠습니다. MainPage.xaml.cs 파일을 열고 LoadConstants 메서드를 찾습니다.

  2. 문자열 목록을 다음으로 바꿔서 모든 약식 용어가 어떻게 긴 용어로 바뀌었는지 확인합니다.

string[] initialConstants = {
                "Acceleration due to gravity = 9.80665",
                "Bars to pounds per square inch = 14.5037738",
                "Centimeters to inches = 0.393700787",
                "Degrees to radians = 0.0174532925",
                "Feet to meters = 0.3048",
                "Grams to ounces = 0.035273",
                "Inches to centimeters = 2.540",
                "Inches to millimeters = 25.4",
                "Kilograms to pounds = 2.20462262",
                "Kilometers to miles = 0.621371192",               
                "Liters to pints = 2.11337642",
                "Meters to feet= 3.2808",
                "Miles to kilometers = 1.609344",
                "Millimeters to inches = 0.0393700787",
                "Ounces to grams = 28.3495",
                "Pints to liters = 0.473176473",   
                "Pounds per square inch to bars = 0.0689475729",
                "Pounds to kilograms = 0.45359237",                            
                "Radians to degrees = 57.2957795",
                "Speed of light in meters per second = 299792458",
                "Speed of light in miles per second = 186282.397"
            };
  1. 이제 앱을 실행하고 내레이션을 켭니다. 철저하게 하려면 내레이터가 해당 항목을 읽도록 각 수학 함수, 연산 및 상수를 강조 표시해야 합니다. 이제 모든 것이 자연스럽고 이해할 수 있게 들리나요? 그렇게 들리지 않는다면 문자열을 수정하거나 AutomationProperites.Name 속성을 추가 또는 조정하세요.

  2. 대괄호 및 여러 수학 함수를 사용하여 계산을 입력한 후(어떤 수학적 의미가 있는지는 중요하지 않음) 텍스트 표시를 강조 표시해 보세요. 이 문제를 해결하려면 몇 가지 코딩을 수행해야 합니다.

내레이터를 지원하기 위한 코드 추가

이렇게 변경한 덕분에 내레이터는 이제 UI 요소에서 잘 작동합니다. 그러나 들리는 메시지는 도움이 되지만 트리거 이벤트가 UI 요소가 아닌 경우도 있습니다. 또한 계산의 발음을 개선하려고 합니다. 여기서는 오류 메시지를 처리하는 음성 신시사이저 및 계산을 처리하기 위한 짧은 코드 변경 내용을 추가하겠습니다.

  1. MainPage.xaml.cs 파일을 열고 다음을 포함하도록 using 문을 업데이트합니다.
using System.Threading.Tasks;
using Windows.Media.SpeechSynthesis;
using Windows.UI.Xaml.Automation;
  1. 전역 변수 목록에 다음을 추가합니다.
        // Declare variables needed for speech output.
        SpeechSynthesizer speech;
        MediaElement mediaElement;
  1. MainPage 메서드에서 이 변수를 초기화합니다. 그러면 다음과 같이 표시됩니다.
        public MainPage()
        {
            this.InitializeComponent();

            // Hide the error field.
            textError.Visibility = Visibility.Collapsed;

            LoadConstants();

            calculation = new ArrayList();
            backupCalculation = new ArrayList();

            mode = Emode.Calculate;

            // The objects for controlling and playing audio.
            speech = new SpeechSynthesizer();
            mediaElement = new MediaElement();
        }
  1. 사용자가 내레이션 도움말을 원하는지 결정할 수 있도록 토글 스위치나 다른 UI 요소를 추가하는 것이 좋습니다. MainPage.xaml 파일의 listConstants 항목 바로 위(마지막 UI 요소 항목 근처)에 다음을 추가합니다.
        <ToggleSwitch x:Name="ToggleNarration"
            Margin="551,407,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Header="Narration help"
            IsOn="True" />

참고

이 요소는 XAML 파일에서 올바른 순서로 가져와야 합니다. 그렇지 않으면 이 항목이 상수 목록에 나타나는 것과 같이 비쳐 보이는 효과가 나타납니다.

  1. 다시 MainPage.xaml.cs에서 SayAsync 메서드를 추가하여 지정된 텍스트 줄을 말합니다. 방금 추가한 speechmediaElement 변수가 사용되고 이 작업이 비동기 작업인지 확인합니다.
        private async Task SayAsync(string text)
        {
            // Narrate the given text if narration help is on.
            if (ToggleNarration.IsOn == true)
            {
                // Generate the audio stream from plain text.
                SpeechSynthesisStream stream = await speech.SynthesizeTextToStreamAsync(text);

                // Send the stream to the media object, then play it.
                mediaElement.SetSource(stream, stream.ContentType);
                mediaElement.Play();
            }
        }
  1. 이제 SayAsync 메서드 호출을 추가해야 합니다. CalculateAsync 메서드의 catch 블록으로 시작합니다.
            catch
            {
                TextError.Visibility = Visibility.Visible;
                CopyCalculation(backupCalculation, calculation);
                await SayAsync("Oops, there is an error in your calculation.");
            }
  1. 계속 CalculateAsync 메서드에서 여기 표시된 줄 뒤에 다음 SayAsync 호출을 추가합니다.
                    // Add the entry to the next calculation, just in case the user wants to add to it.
                    OneEntry resultEntry = new OneEntry(Etoken.Number, result, txt);
                    calculation.Add((object)resultEntry);

                    await SayAsync($"The result is: {txt}");
  1. 이제 Button_Click 메서드를 찾고 switch 블록의 default: 항목을 다음으로 변경합니다. 이렇게 하면 계산이 발음될 수 있습니다.
                default:

                    // User has clicked a math or digit button.
                    string tag = b.Tag.ToString();
                    string txt = "";

                    // If in narrative mode, then use a full English string for the display text, if a full string has been specified.
                    if (ToggleNarration.IsOn == true)
                    {
                        txt = b.GetValue(AutomationProperties.NameProperty).ToString();
                    }

                    // Use the content of the button as the equation text.
                    if (txt.Length == 0)
                    {
                        txt = b.Content.ToString();
                    }

                    MathEntry(txt, tag);
                    break;
  1. 앱을 실행하여 코드를 테스트합니다. 내레이터 및 내레이션 도움말 토글 단추가 켜져 있는지 확인합니다. 무의미한 계산을 입력합니다(예: Sqrt (제곱근 열기로 나타남). =을 선택하면 자연스럽게 들리는 오류 메시지가 제공되나요? 어떻게 SayAsync 메서드 및 내레이터에 동일한 음성이 사용되어 오디오 경험을 부드럽게 유지하는지 확인합니다.

  2. 계산을 완료하고 디스플레이에 텍스트 철자가 표시되는지 확인합니다. 디스플레이를 강조 표시하면 내레이터가 계산을 분명하게 읽어 줍니다. 선택 작업이 약간 문제가 될 수 있지만, 이 정도면 훨씬 더 많은 액세스 가능한 환경을 제공하기에 충분합니다.

앱에 음성 합성 옵션을 추가하면 내레이션에서 간격을 채울 수 있어 사용자에게 도움이 됩니다. 이것은 완전히 앱에 따라 다르기 때문에 내레이터에 친숙한 UI 요소에 우선 순위가 적용됩니다. 여기서 살펴본 것처럼 필요한 모든 것은 최소한의 추가 내레이션일 수 있습니다.

단원 요약

이 단원에서는 음성 합성이 적어도 이전에 비해 놀라울 만큼 유용하다는 것을 알아보았습니다. 내레이터를 켜기만 하면 Windows에서 다양한 내레이션이 무료로 제공된다는 것을 알아보았습니다. 그러나 메시지 문자열의 산만한 부분이 내레이터를 사용할 때 쉽게 눈에 보인다는 것도 알아보았습니다. 액세스 가능한 앱의 경우 메시지 문자열이 분명하고 완전한지 확인해야 합니다.

또한 내레이터가 완벽하지 않으며 특정 상황에서 지원이 필요하다는 것을 알아보았습니다. 예를 들어 약식 형태는 본질적으로 단어이므로 "sin" 같은 수학 단어는 제대로 발음되지 않습니다. 하지만 이 문제를 해결하는 XAML 설정을 쉽게 사용할 수 있고 구현하기 어렵지 않습니다.