audioタグ不親切すぎ問題ヘルプ…

長いですが、最終的に「audioタグを使いつつシンプルなmp3プレイヤーデザインへの変更」が出来ず、わからない助けて…て話なので、わからない人は一緒に困るだけの記事です(^q^)

＊＊＊

そっち関係素人の人からすると、実際何が起きたのか正直よくわかってないんだけど、少し前からflashが基本サービス外になっていた。自然に読み込まれなくなり、いちいちチェックを押さないと表示されなくなったり。サイトをスマホでチェックしている人が増えたのもあり、flashなんて使わない…なサイトが一気に増えました。

で、困ることが発生したわけです。
今まで大体のボイスサイトは、

１：flash表示で、再生ボタンを押すと流れ始める（うちはこれだった）
２：少年.mp3（キャラ設定）とか書いてある文字（リンク）をクリックして再生
３：画像にmp3のリンクが貼ってある（ちょっと特殊なパターン）のをクリックして再生
４：外部動画ツール等を表示させて再生させる（youtubeやchobit等別サイトのサービスを利用している）

のどれかだったわけですが、２と３はいちいち別窓を開いたりするため、聞き手側からすると「不親切」と感じる。（１つ聴くだけでいいや…てなる率が跳ね上がる）
そのため、１を利用するサイトが多くあったように思えるのですが、１が出来なくなった関係で、４にする…というサイトが増えていたり。
wix等スマホもPCも同じ表示ができ、タグがわからなくても感覚でサイトを開ける！というサービスを利用する人が増え、サービスを利用してる人的には一切問題ないと思う（そういう機能も実装されている）のだけど、そうでない場合、flashが使用できなくなった（実際はできるけど、ひと手間必要になってしまったし、詳しくない人は再生できない可能性も高くなった）ことで、非常に面倒になったと思う。
そこで、少し調べた結果、
「HTML５」やら「audioタグ」やらで検索すると

<audio src="音声ファイルの名前.mp3" preload="auto" controls controlslist="nodownload"></audio>

と打ち込めば、デフォルトのデザインのプレイヤーが表示されるぞ！（DLできない形式）という情報はゲットできたわけですが、デフォがくっそだせぇ…。
デフォルトがこれ。（背景が白だとわかりにくいので黒にしておいた）
少し前までは、角が丸くなっていなくて、四角だったのでまだ許せたわけですが、こんなのがキャラ数分（１０以上）とか縦に連続表示されていた日には、そっとバツボタンを押してページを閉じたくなる…。
（実際はブラウザ依存とかで、見るブラウザによって細かい部分のデザインは違ってくるらしい）
ぁ…でも、そんなのでいいよ！とりあえず表示できれば！て方は、とても親切でわかりやすいサイトがあったので、そこチェックして下さい。
とりあえず、デフォルトをこのデザインに変えたやつ…３日ほど、足の小指を、物にすごい勢いでぶつけ放題になる呪いにかかってください。

flashを使っていた経験があったので、くそダサデザインは嫌じゃ…と同じことを考える人々が、変わりの素敵デザインをUPしてくれているに違いない！
それをDLしてきて、サイトにUPし、読み込みさせればオサレデザインで公開できるぜ！ひゃっほぉお！と思ったわけですが…
なかったぜ(^q^)
実際になかったわけではなく、audio.jsというサイトから、元をDLしてきて、いじれば素敵デザインで使えるぜ！という話なのですが、まずサイトが英語。まぁ…ね…まぁ…ね？まぁ…これはね、flashの時も物凄いよくある話だったので、問題ないです。とりあえず、安全なファイルかどうかだけチェックしてDL。で、「audio.js audioタグ　デザイン」で検索するか！と検索をし、４０サイトくらいチェックして、日本語のサイトで、わかりやすそうなページを探し、４つくらい書かれた物をそのままコピーし、試してみたわけですよ。
できねぇ(^q^)
HTMLのタグがわからないとダメ。まぁ…これはなんとかなるというか、ほぼほぼいじる必要がない。が、CSSがくそなげぇ上にどこが必要で不要なのかもわからず（専門的なの混ざりすぎ問題）日本語サイトに親切に書いてあるのか？と思って、コピーして、不要な場所削ったりしつつ一つ一つ試してはデザイン変わる？変わる？とチェックするも、なんかサンプルページに表示されている表示にならない率が高い。
その上、JavaScriptがわからないとダメってページも存在。これ…まじ無理…前から登場するたびにあぁ無理ってなってたよ！よ！
は？WordPress環境？インクルード…？？？
頭パーンした＼(^o^)／＼(^o^)／＼(^o^)／
本体DLして、サイトにUPして、その他はコピって貼り付けて、色とかサイズとかちょっと自分好みにいじれば、いぇーぃ素敵デザイン！と思ってたけど…そんな…簡単じゃ…なかった……よ……

flashの頃は、アホにもわかるように親切なページがあったりしたものの…まだ新しいからかなぁ…アホにはわかりづらいサイトばかりというか、デフォデザインの詳細について書かれているサイトばかりで、そもそも、色んなデザインが存在する…って状況ですらなかった。
少し違うデザインを考えたよ！てページが、パッと調べだからかもだけど、既に３、４個しかない感じで、それも難しいなーって印象。
ボイスサイトに必要なのは、「再生と停止ボタンだけが存在し、シンプルで場所を取らないデザインのもの」とかだと思うんだけど…そもそも、画像を自分で用意してね！スタイルっぽぃんだよね？なんか。
自分で用意するのは問題ないのだけど、「画像を押したら自動で再生されるスタイル」でないならば、それって、最初に言ってた「３」と変わらない状況では？(^q^)

あぁ…そんなサイトは存在しないのか。理解した上で無料で他人に詳しく教えてあげようっていう人はいないのね…と思ったので、有料ならばあるのでは？２００円とか３００円くらいなら需要もありそうよね…と検索。
LancersとかCrowdworksとかならありそう…！ポチッ
引っかからない(^q^)
しゃーないので、ウェブデザインをやってる友人にLINEしたら「デフォしかわかんないね」てなった。
アホはwixにサイト移転しろよってことかな…嫌ならクソダサデザインで諦めろってことかな…と諦めモードに入りつつも…
ん？？？もしや、Twitterやらnoteやらにまとめ作ってUPしたら、詳しい人が詳細ページ作ってくれたり、有料で対応してくれたり、わかりやすいサイト教えてくれたりするのでは？？？という、所まで来て、note更新してみました。
多分ね、私だけが困ってるわけじゃないと思ったのね。少しでも勉強して、理解できたら、他のボイスサイトでwixとか使ってない人も助かるかな…？と。
サンプルというか…アレなんですが。flashの頃のうちのサイトのサンプル置き場デザインがこんな感じなのですが…
こんな感じの、超シンプルデザインなプレイヤーできないでしょうか…？存在しないかなぁ…？？
詳しい方よろしくおねがいします。