サイトほぼ完成、が、Vue Plyrのダウンロードボタンが機能しない...
こんにちは、管理人です。
親友・アドバイザーにも色々教えてもらいながら、音楽素材に簡単にアクセスできるWebページの作成がようやくできてきました。
これまでの音楽素材サイトなどは、ジャンルなどごとにページが作られ、そのページの中に素材が埋め込まれている(YouTube埋め込み、ファイル直ダウンロードなど)形でした。
これだと、そのサイトで用意されている素材・音源数がいくつあるのか、さらに、それぞれどういう曲かをページスクロールしながら見ないといけないため、アクセシビリティがあまり良くありませんでした。
iTunesのように、曲名やその性質などはコンパクト化して、リストにするなどしてできる限りページ遷移やスクロールなく見れるようにし、なおかつ、その素材・音源も簡単に聴けるようにしたい...
これを実現するために、親友から、Vueでajaxを実装する方法を教えてもらいました。時間はかかりましたが、本サイトでは、曲をリスト化し、ページ遷移することなく、それぞれの音源にアクセスすることを実現しました。
ページの構築はWordPressを使用していますが、その上で、リストのテーブル・検索Box(フィルタ)・並び替え機能などはBootstrap5やVue-multiselect2を使って実現しています。
Bootstrapのリンク:https://getbootstrap.com/
Vue-multiselectの参考になるリンク:https://www.kabanoki.net/4224/
そして、ページ遷移せずに聴ける音楽プレイヤーを入れるため、今回はVue-Plyrを導入しています。日本語ページがなかなかないので、分かりづらいですが、このプレイヤーはダウンロードボタンもオプションで付けられるので、こちらを選びました。
Vue-Plyrのリンク:https://github.com/redxtech/vue-plyr
これで実現したいサイトができた...!そう思った矢先、(忙しく触れていませんでしたが)数カ月ぶりに当サイトの更新をしていたところ...
音楽プレイヤーのダウンロードボタンを押しても、MP3がダウンロードできず、、、
ダウンロードボタンにマウスを重ねたときが上のスクリーンショットですが、その左下を見ると、、、
音源のURL(MP3)じゃなくて、トップページのURL(HTML)になっとる!!
数ヶ月前に試したとき、MP3のダウンロードできていたのに、なぜだ...
もしかして、Vue-Plyrがアップデートして、ダウンロード機能が変わったのか...?
日本語のページがないから、探しても理由がなかなか見つからない。。。教えて頭の良い人ー!
(Yahoo知恵袋で聞いたら、誰かわかるかな...?)
以上、サイト構築の進捗でした。