88109


実行環境  
統合開発環境 eclipse  
payara server: version 5  
jdk1.8

目標はaudioタグを記述し、  
サーバーにデプロイした後、  
google chromeにaudioとして表示させることです。

試したこととして  
jsfではaudioタグが対応していなかったのでhtmlのaudioタグをfaceletsタグとして使えば表示されるのではないかと思い、記述して読み込ませた結果、読み込んでいるが表示されませんでした（図１）

また、ネットにaudioタグはjsfでは対応していないという記事があったのでそれを考慮して  
primefacesというサードパーティのjarファイルをダウンロードして使ってみたものの  
audioの部分は表示されませんでした(図２)

[code]

        図１
        <html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:jsf="http://java.sun.com/jsf/composite/javax.faces">
        <head>
        <title>testページへようこそ</title>
        </head>
        <body>
        <audio jsf:id="audio"/>
        </body>
        </html>
        </pre>
    
        図２
        <html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:jsf="http://java.sun.com/jsf/composite/javax.faces">
        <head>
        <title>testページへようこそ</title>
        </head>
        <body>
           <p:audio player="mp3" controls="true"/>
        </body>
        </html>
    
[/code]

図１、図２ともにタイトルは読み込んでいてaudioタグは表示されないといった様子でした。

検証ツールでみたのですが、audioタグは読み込まれていましたが表示されませんでした。  
xhtmlでaudioタグをなんとか、使える方法をご存じの方などおられますでしょうか？


CC BY-SA 4.0
2022-03-30T16:15:05.763
88106
2022-03-31T17:56:07.013
2022-03-30T16:34:04.760
52034
52034
question
jsf xhtml audio
jsfでの話　xhtmlファイルではaudioタグは使えないのですか？


手元で[こちら](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#the_audio_element)を参考に`audio`タグを埋めてみましたが、特に問題なさそうに見えます。  
(属性の真偽値を省略するとパースエラーになるので、`controls="controls"`
のように書く必要はありました([参考](https://stackoverflow.com/q/6531738/4506703))。)

[code]

    <html
      lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
    >
      <h:head>
        <title>Facelets Hello World</title>
      </h:head>
      <h:body>
        <audio controls="controls">
          <source
            src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3"
            type="audio/mp3"
          />
          <source
            src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.ogg"
            type="audio/ogg"
          />
          <p>
            Your browser doesn't support HTML5 audio. Here is a
            <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3">link to the audio</a>
            instead.
          </p>
        </audio>
      </h:body>
    </html>
    
[/code]

* * *

([コメント](https://ja.stackoverflow.com/questions/88106/88109?noredirect=1#comment99924_88109)を受けて追記)

`<audio controls>` のように、属性値を省略する書き方は _attribute minimization_ と呼ばれていました。  
HTMLとは異なり、XHTML では仕様上 attribute minimization は許容されていません。  
値を省略せず記述する必要があります。  
この時の属性値は、属性名になります。  
つまり、

[code]

    <audio controls>
    
[/code]

をminimizeせずに書くと

[code]

    <audio controls="controls">
    
[/code]

になります。

  * 参考: [4.5. Attribute Minimization](https://www.w3.org/TR/xhtml1/diffs.html#h-4.5) \- XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)

ちなみに、現在の HTML の仕様からは "attribute minimization" という用語は無くなっているようです。  
また、今回のことに関する HTML の仕様は

  * [2.3.2 Boolean attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) \- HTML Living Standard — Last Updated 30 March 2022

に書かれていますが、

> The values "true" and "false" are not allowed on boolean attributes.

とある通り、質問文にあるような `controls="true"` という書き方は HTML としても妥当ではありません。

> <audio controls="controls">でなぜ動くのかが知りたいです

prefix を付けていないので[デフォルト名前空間](https://www.w3.org/TR/REC-xml-names/#dt-
defaultNS)である `http://www.w3.org/1999/xhtml` で定義されたタグ(要するに、素のHTMLタグ)とみなされます。  
なので Faceletプロセッサは特に何もせずそのまま出力するだけです。


CC BY-SA 4.0
2022-03-30T21:26:56.233
88109
2022-03-31T17:56:07.013
2022-03-31T17:56:07.013
2808
2808
88106
answer