CSS - Aural Media

Um documento da web pode ser renderizado por um sintetizador de voz. CSS2 permite que você anexe recursos de estilo de som específicos a elementos específicos do documento.

A renderização auditiva de documentos é usada principalmente por deficientes visuais. Algumas das situações em que um documento pode ser acessado por meio de renderização aural em vez de renderização visual são as seguintes.

  • Aprender a ler
  • Training
  • Acesso à web em veículos
  • Entretenimento caseiro
  • Documentação industrial
  • Documentação médica

Ao usar propriedades auditivas, a tela consiste em um espaço físico tridimensional (som surround) e um espaço temporal (pode-se especificar sons antes, durante e depois de outros sons).

As propriedades CSS também permitem variar a qualidade da fala sintetizada (tipo de voz, frequência, inflexão, etc.).

Aqui está um exemplo -

<html>
   <head>
      <style type = "text/css">
         h1, h2, h3, h4, h5, h6 {
            voice-family: paul;
            stress: 20;
            richness: 90;
            cue-before: url("../audio/pop.au");
         }
         p {
            azimuth:center-right;
         }
      </style>
   </head>

   <body>
   
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

Ele direcionará o sintetizador de voz para falar cabeçalhos em uma voz (uma espécie de fonte de áudio) chamada "paul", em um tom plano, mas em uma voz muito rica. Antes de falar os cabeçalhos, uma amostra de som será reproduzida a partir do URL fornecido.

Parágrafos com classe 'heidi' parecerão vir da frente esquerda (se o sistema de som for capaz de áudio espacial), e parágrafos da classe 'peter' da direita.

Agora veremos as várias propriedades relacionadas à mídia auditiva.

  • o azimuth conjuntos de propriedades, de onde o som deve vir horizontalmente.

  • o elevation conjuntos de propriedades, de onde o som deve vir verticalmente.

  • o cue-after especifica um som a ser reproduzido após falar o conteúdo de um elemento para separá-lo de outro.

  • o cue-before especifica um som a ser reproduzido antes de falar o conteúdo de um elemento para separá-lo de outro.

  • o cue é uma forma abreviada de definir o cue-before e o cue-after.

  • o pause-after especifica uma pausa a ser observada após falar o conteúdo de um elemento.

  • o pause-before especifica uma pausa a ser observada antes de falar o conteúdo de um elemento.

  • o pause é uma abreviatura para definir pausa antes e pausa depois.

  • o pitch especifica o tom médio (uma frequência) da voz falada.

  • o pitch-range especifica a variação no tom médio.

  • o play-during especifica um som a ser reproduzido como fundo enquanto o conteúdo de um elemento é falado.

  • o richness especifica a riqueza ou brilho da voz que fala.

  • o speak especifica se o texto será renderizado auditivamente e, em caso afirmativo, de que maneira.

  • o speak-numeral controla como os numerais são falados.

  • o speak-punctuation especifica como a pontuação é falada.

  • o speech-rate especifica a taxa de fala.

  • o stress especifica a altura dos "picos locais" no contorno de entonação de uma voz.

  • o voice-family especifica a lista priorizada de nomes de família de voz.

  • o volume refere-se ao volume médio da voz.

A propriedade azimute

A propriedade azimuth define de onde o som deve vir horizontalmente. Os valores possíveis estão listados abaixo -

  • angle- A posição é descrita em termos de um ângulo dentro do intervalo -360deg a 360deg . O valor 0deg significa diretamente à frente no centro do palco de som. 90deg é para a direita, 180º para trás, e 270deg (ou, de forma equivalente e mais convenientemente, -90deg ) para a esquerda.

  • left-side- O mesmo que '270deg'. Com 'atrás', '270deg'.

  • far-left- O mesmo que '300deg'. Com 'atrás', '240deg'.

  • left- O mesmo que '320deg'. Com 'atrás', '220deg'.

  • center-left- O mesmo que '340deg'. Com 'atrás', '200deg'.

  • center- O mesmo que '0deg'. Com 'atrás', '180deg'.

  • center-right- O mesmo que '20deg'. Com 'atrás', '160deg'.

  • right- O mesmo que '40deg'. Com 'atrás', '140deg'.

  • far-right- O mesmo que '60deg'. Com 'atrás', '120deg'.

  • right-side- O mesmo que '90deg'. Com 'atrás', '90 graus'.

  • leftwards- Move o som para a esquerda e em relação ao ângulo atual. Mais precisamente, subtrai 20 graus.

  • rightwards- Move o som para a direita, em relação ao ângulo atual. Mais precisamente, adiciona 20 graus.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      h1   { azimuth: 30deg }
      td.a { azimuth: far-right }          /*  60deg */
      #12  { azimuth: behind far-right }   /* 120deg */
      p.comment { azimuth: behind }        /* 180deg */
   -->
</style>

A propriedade de elevação

A propriedade de elevação define de onde o som deve vir verticalmente. Os valores possíveis são os seguintes -

  • angle- Especifica a elevação como um ângulo, entre -90deg e 90deg . 0deg significa no horizonte à frente, o que significa vagamente no nível do ouvinte. 90deg significa diretamente acima da cabeça e -90deg significa diretamente abaixo.

  • below - O mesmo que '-90deg'.

  • level - O mesmo que '0deg'.

  • above - O mesmo que '90deg'.

  • higher - Adiciona 10 graus à elevação atual.

  • lower - Subtrai 10 graus da elevação atual.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      h1   { elevation: above }
      tr.a { elevation: 60deg }
      tr.b { elevation: 30deg }
      tr.c { elevation: level }
   -->
</style>

A propriedade cue-after

A propriedade cue-after especifica um som a ser reproduzido depois de falar o conteúdo de um elemento para separá-lo de outro. Os valores possíveis incluem -

  • url - O URL de um arquivo de som a ser reproduzido.

  • none - Nada precisa ser tocado.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      a {cue-after: url("dong.wav");}
      h1 {cue-after: url("pop.au"); }
   -->
</style>

A propriedade cue-before

Esta propriedade especifica um som a ser reproduzido antes de falar o conteúdo de um elemento para separá-lo de outro. Os valores possíveis são -

  • url - O URL de um arquivo de som a ser reproduzido.

  • none - Nada precisa ser tocado.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      a {cue-before: url("bell.aiff");}
      h1 {cue-before: url("pop.au"); }
   -->
</style>

A propriedade cue

A propriedade cue é uma abreviatura para definir cue-before e cue-after . Se dois valores são fornecidos, o primeiro valor é cue-before e o segundo é cue-after . Se apenas um valor for fornecido, ele se aplica a ambas as propriedades.

Por exemplo, as duas regras a seguir são equivalentes -

<style type = "text/css">
   <!--
      h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
      h1 {cue: url("pop.au") }
   -->
</style>

A propriedade pause-after

Esta propriedade especifica uma pausa a ser observada após falar o conteúdo de um elemento. Os valores possíveis são -

  • time - Expressa a pausa em unidades de tempo absoluto (segundos e milissegundos).

  • percentage- Refere-se ao inverso do valor da propriedade speech-rate . Por exemplo, se a velocidade da fala é de 120 palavras por minuto (ou seja, uma palavra leva meio segundo, ou 500 ms ), uma pausa após de 100% significa uma pausa de 500 ms e uma pausa posterior de 20% significa 100 ms .

A propriedade pause-before

Esta propriedade especifica uma pausa a ser observada antes de falar o conteúdo de um elemento. Os valores possíveis são -

  • time - Expressa a pausa em unidades de tempo absoluto (segundos e milissegundos).

  • percentage- Refere-se ao inverso do valor da propriedade speech-rate . Por exemplo, se a velocidade da fala é de 120 palavras por minuto (ou seja, uma palavra leva meio segundo ou 500 ms ), uma pausa antes de 100% significa uma pausa de 500 ms e uma pausa antes de 20% significa 100 ms .

A propriedade pause

Esta propriedade é uma abreviatura para definir a pausa antes e depois da pausa . Se dois valores forem fornecidos, o primeiro valor será pausar antes e o segundo será pausar depois.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      /* pause-before: 20ms; pause-after: 20ms */
      h1 { pause : 20ms }  
	
      /* pause-before: 30ms; pause-after: 40ms */
      h2{ pause : 30ms 40ms }  
	
      /* pause-before: ?; pause-after: 10ms */
      h3 { pause-after : 10ms }
   -->
</style>

A propriedade do pitch

Esta propriedade especifica o tom médio (uma frequência) da voz falada. O tom médio de uma voz depende da família de vozes. Por exemplo, o tom médio para uma voz masculina padrão é cerca de 120 Hz, mas para uma voz feminina, é cerca de 210 Hz. Os valores possíveis são -

  • frequency - Especifica o tom médio da voz falada em hertz (Hz).

  • x-low, low, medium, high, x-high - Esses valores não são mapeados para frequências absolutas, pois esses valores dependem da família de vozes.

A propriedade pitch-range

Esta propriedade especifica a variação do tom médio. Os valores possíveis são -

  • number- Um valor entre '0' e '100'. Uma faixa de pitch de '0' produz uma voz monótona e plana. Uma faixa de tom de 50 produz inflexão normal. Intervalos de pitch maiores que 50 produzem vozes animadas.

A propriedade play-during

Esta propriedade especifica um som a ser reproduzido como fundo enquanto o conteúdo de um elemento é falado. Os valores possíveis podem ser qualquer um dos seguintes -

  • URI - O som designado por este <uri> é reproduzido como fundo enquanto o conteúdo do elemento é falado.

  • mix- Quando presente, esta palavra-chave significa que o som herdado da propriedade play-during do elemento pai continua a tocar e o som designado pelo uri é mixado com ele. Se mix não for especificado, o som de fundo do elemento substitui o do pai.

  • repeat- Quando presente, esta palavra-chave significa que o som se repetirá se for muito curto para preencher toda a duração do elemento. Caso contrário, o som é reproduzido uma vez e depois pára.

  • auto - O som do elemento pai continua a tocar.

  • none - Esta palavra-chave significa que há silêncio.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      blockquote.sad { play-during: url("violins.aiff") }
      blockquote q   { play-during: url("harp.wav") mix }
      span.quiet     { play-during: none }
   -->
</style>

A propriedade da riqueza

Esta propriedade especifica a riqueza ou brilho da voz falada. Os valores possíveis são -

  • number- Um valor entre '0' e '100'. Quanto maior o valor, mais a voz será transmitida. Um valor mais baixo produzirá uma voz suave e melíflua.

The speak Property

Esta propriedade especifica se o texto será renderizado auditivamente e, em caso afirmativo, de que maneira. Os valores possíveis são -

  • none - Suprime a renderização auditiva para que o elemento não precise de tempo para renderizar.

  • normal - Usa regras de pronúncia dependentes do idioma para renderizar um elemento e seus filhos.

  • spell-out - Soletra o texto uma letra de cada vez.

Observe a diferença entre um elemento cuja propriedade 'volume' tem um valor 'silencioso' e um elemento cuja propriedade 'fala' tem o valor 'nenhum'. O primeiro leva o mesmo tempo como se tivesse sido falado, incluindo qualquer pausa antes e depois do elemento, mas nenhum som é gerado. Este último não requer tempo e não é processado.

A propriedade speak-numeral

Esta propriedade controla como os numerais são falados. Os valores possíveis são -

  • digits- Fale o numeral como dígitos individuais. Assim, "237" é falado como "Dois Três Sete".

  • continuous- Fale o numeral como um número completo. Assim, "237" é falado como "Duzentos e trinta e sete". As representações de palavras dependem do idioma.

A propriedade speak-punctuation

Esta propriedade especifica como a pontuação é falada. Os valores possíveis são -

  • code - A pontuação, como ponto e vírgula, colchetes e assim por diante, deve ser falada literalmente.

  • none - A pontuação não deve ser falada, mas apresentada naturalmente como várias pausas.

A propriedade da taxa de fala

Esta propriedade especifica a taxa de fala. Observe que os valores absolutos e relativos de palavras-chave são permitidos. Os valores possíveis são -

  • number - Especifica a taxa de fala em palavras por minuto.

  • x-slow - O mesmo que 80 palavras por minuto.

  • slow - O mesmo que 120 palavras por minuto.

  • medium - O mesmo que 180 - 200 palavras por minuto.

  • fast - O mesmo que 300 palavras por minuto.

  • x-fast - O mesmo que 500 palavras por minuto.

  • faster - Adiciona 40 palavras por minuto à taxa de fala atual.

  • slower - Subtrai 40 palavras por minuto da taxa de fala atual.

A propriedade estresse

Esta propriedade especifica a altura dos "picos locais" no contorno de entonação de uma voz. O inglês é um idioma com ênfase, e diferentes partes de uma frase são atribuídas à ênfase primária, secundária ou terciária. Os valores possíveis são -

  • number- Um valor entre '0' e '100'. O significado dos valores depende do idioma falado. Por exemplo, um nível de '50' para uma voz masculina padrão que fala inglês (tom médio = 122 Hz), falar com entonação e ênfase normais teria um significado diferente de '50' para uma voz italiana.

A propriedade da família de voz

O valor é uma lista priorizada, separada por vírgulas, de sobrenomes de vozes. Pode ter os seguintes valores -

  • generic-voice- Os valores são famílias de voz. Os valores possíveis são 'masculino', 'feminino' e 'criança'.

  • specific-voice - Os valores são instâncias específicas (por exemplo, comediante, trinóides, carlos, lani).

Aqui está um exemplo -

<style type = "text/css">
   <!--
      h1 { voice-family: announcer, male }
      p.part.romeo  { voice-family: romeo, male }
      p.part.juliet { voice-family: juliet, female }
   -->
</style>

A propriedade do volume

O volume refere-se ao volume médio da voz. Pode ter os seguintes valores -

  • numbers- Qualquer número entre '0' e '100'. '0' representa o nível mínimo de volume audível e 100 corresponde ao nível máximo de conforto.

  • percentage - Esses valores são calculados em relação ao valor herdado e, em seguida, são recortados no intervalo de '0' a '100'.

  • silent- Nenhum som. O valor '0' não significa o mesmo que 'silencioso'.

  • x-soft - O mesmo que '0'.

  • soft - O mesmo que '25'.

  • medium - O mesmo que '50'.

  • loud - O mesmo que '75'.

  • x-loud - O mesmo que '100'.

Aqui está um exemplo -

<style type = "text/css">
   <!--
      P.goat  { volume: x-soft }
   -->
</style>

Parágrafos com classe goat será muito macio.