やっと重い腰を上げて、残っていたサイトの常時SSL化を行いました。
すると、#audioプラグインがどうしてもエラーになります。
これはHAIKのバグでしょうか？
SSL化していないサイトでは正常動作します。
確認のために、新規に２つのサブドメインを作成して、片方はSSL化し、
残りはSSL化しないサイトを作成して検証しました。

【環境】
Lolipopのサーバ上に最新のHAIK 7.3.0をインストールし常時SLL化してから、
以下のソースを記述。

#audio(https://open-haik.qhmtips.com/swfu/d/nijiiro.mp3)

#audio(swfu/d/nijiiro.mp3)

mp3ファイルは　SWFUで事前にアップしています。

【結果】
Chromeのデベロッパーツール Consoleに添付のエラーが出ます。

SSL化していないサイトでは、正常に動作します。
みなさんのサイトでは問題ありませんか？

Yujiroさん

SWFUは、画像とPDFくらいにしておいた方がトラブルがないような
気がします。

しかし、今回の件は分からなかったですね。
原因がはっきりしないのは気になりますが、対策が打てるので
原因追及はあきらめます。

あーー、なるほどSWFUで。

思い出した。これ、mp3ファイルやSSLのことではないですが、私もアップロードで何かしっくり
こない経験があったような気が。それも確かファイルに絡んだトラブルが。
なんとなくFTPでアップロードしなおしたら正常になったので、まんまスルーとい言った感じで。

解決しました。

SWFUを使わないで、適当なフォルダを作成しFTPでmp3ファイルを
コピーしたら、SSL化したサイトでもエラーが出なくなりました。
原因は、分かりませんが、mp3などのファイルは　SWFU　で
アップしないで、作成したフォルダにFTPでアップすれば問題なく
動作します。

結果
https://open-haik.qhmtips.com/

原因不明ではありますが、対策がわかったためこれで完了としたいです。
みなさん、調査ご協力ありがとうございました。

-------------------------------------------
まとめ

【トラブルの状況】
ロリポップのSSL化したサイトでMP3ファイルの再生がエラーになる。
MP3ファイルはSWFUでアップしてある。
エックスサーバやさくらサーバでは正常に動作する。

【原因】
原因不明
ロリポップのSSLサイトでは、SWFUでアップしたMP3ファイルは見えないようだ

【対策】
MP3ファイルは、SWFUでアップロードしない。
アップロード先は、自分で適当なフォルダを作成しFTPでアップする。

Yujiroさん

さくらサーバとエックスサーバのSSL化したサイトで#audioを
確認したところ正常に動作しました。

ロリポップのSSL化したサイトで、別のmp3ファイルを確認
しましたが、結果は同じくエラーになりました。

なぜ、ロリポップだけエラーになるのか、ますます
分からなくなってしまいました。

どうしたものでしょうか.....
困ったなあ....

これは、HAIKの問題ではなくロリポップの問題かもしれませんね。
ロリポップに質問してみようかな？

tomozoさん

直前のコメントの続き。

https://open-haik.qhmtips.com/swfu/d/nijiiro.mp3
http://open-haik2.qhmtips.com/swfu/d/nijiiro.mp3

これら二つのURLにダイレクトにアクセスし、上のSSLでは再生不能。（やはり416エラー）
下の非SSLでは再生可。

ブラウザでmp3に直接アクセスしていますよね。

ということは、エラーの原因はHAIKのプログラムにはないことに？

tomozoさん

SSLのページをChromeでロードすると・・・
====
エラーコード416
====
ちなみに416の意味として・・・
----
次のどれかに当てはまる不正なRangeヘッダの値を使用した静的コンテンツ
へのアクセスの場合，エラーステータスコード416が返ります。
Rangeヘッダの値が"byte"から始まっていない
範囲定義に数字や"-"を使用していない
指定範囲が妥当ではない
====

同じくFireFoxでロードすると・・・
====
メディア https://open-haik.qhmtips.com/swfu/d/nijiiro.mp3 をデコードで
きませんでした。

メディアリソース https://open-haik.qhmtips.com/swfu/d/nijiiro.mp3 をデ
コードできませんでした。エラー: Error Code:
NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)
====

どうもSSLのページへアクセスしたときだけmp3ファイルの扱いにエラーが
出ていることになります。

ここで、非SSLとSSLでなぜこの違いが出るのか腑に落ちないですが、テスト
用のmp3ファイルを他の物いくつかで試すのも方法かと。

追記：
件のmp3ファイルをダウンロードさせていただき、試しにさくらのSSLページ
で検証。
とりあえず異常なし。でもtomozoさんのところで別のmp3を試す価値はあると
思えます。

ユウさん

テスト用に作成したサイトが以下の２つです。
こちらを見てください。

■SSL化対応済
https://open-haik.qhmtips.com/

こちらはエラーになる


■SSL化未対応
http://open-haik2.qhmtips.com/

こちらは正常動作



> #audio()のリンクで青変しているURLの部分が変です。
> 最後の閉じる括弧 ) まで青変しています。
> またURLにマウスポインターを置くと括弧の後にドットが表示されます。

これは、フォーラムの説明欄の話なので関係ないと思われます。

tomzo 様

気付いた点を報告します。

#audio()のリンクで青変しているURLの部分が変です。
最後の閉じる括弧 ) まで青変しています。
またURLにマウスポインターを置くと括弧の後にドットが表示されます。

ソースのURLをクリックすると
404error
お探しのページが見つかりませんでした。
と表示されますが、最後の括弧を削除するとオーディオプレーが表示されます。

Yujiroさん

わざわざテスト環境を作成しての確認ありがとうございます。
私も、Xserverとさくらサーバの環境が使えるので確認して見ます。

実は、昨日さくらサーバのSSL化を行ったのですが、その環境で
この#audioプラグインを試そうとして、間違って余計なものを削除して
しまい、サイトが表示されなくなってしまったのです。
何とか復旧しましたが、このせいでさくらサーバでの確認が
できませんでした。

また、今夜あたり確認してみます。

tomozoさん

第二報　Xserver のSSLでも問題なく作動です。
（ちなみにWAF全部ON）

似たエラーを出すにはmp3ファイルを置いたディレクトリをあり得ない物に指定して。
この状態では当然コード404のエラーになりますが、そのまま再生ボタンを押すと
↓これが出せます。

Uncaught (in promise) DOMException: mediaelement-and-player.min.js:120
The element has no supported sources.

もしかしたらロリポップのSSLはhtaccessあたりでリダイレクト的な処理が行われ、
HAIKでのmp3ファイル読み込みのパスが狂うとか・・・いや、わからんです。

tomozoさん

第一報として、さくらサーバー上でのSSLでは正常動作しています。

なおこのエラーはコード416で表示されている部分のことですね。それと

Uncaught (in promise) DOMException: mediaelement-and-player.min.js:120
The element has no supported sources.


追記

件のページ、SSLでないhttp://を使ってもアクセスできますね。
それでもmp.3ファイルを読み込まないようです。
（416エラーの方だけは消えます）