音声埋め込みについて

  • free100max

    (@free100max)


    8年、 2ヶ月前

    Wordpressの記事に音声(MP3)を埋め込んだ場合、Google Cromeではバーの右端にワンクリックでそのMP3ファイルをダウンロードできるアイコンが表示されていますが、これを消す方法はありませんでしょうか。

    または、クリックしてもダウンロードできない(反応しない)方法でもいいです。

    記事に埋め込んだMP3ファイルをできるだけダウンロードされたくないので、他に何かいい方法があれば教えていただけましたら幸いです。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • CG

    (@du-bist-der-lenz)

    8年、 2ヶ月前

    どういう方法で埋め込んでいるかに係る問題です。ダウンロードのリンクを隠しても、アドレスが分かればMP3ファイルに直接アクセスできます。それがサーバー負荷にも繋がるでしょう。

    トピック投稿者 free100max

    (@free100max)

    8年、 2ヶ月前

    回答ありがとうございます。

    <audio src=”http://〇〇〇〇.com/1.mp3&#8243; controls=”controls”></audio>
    という形で、普通に埋め込んでいます。

    プラグインも探してみましたが、PCでもスマホでもうまく表示されるプラグインが見つからなくて、どうしたものか困っています。

    アドレスがわかればMP3ファイルに直接アクセスできるということは理解しています。

    ただ、わざわざダウンロードのアイコンが表示されていてワンクリックでダウンロードできてしまう状況を避けたいと思っていますので、アイコンを消すかクリックしてもダウンロードできないようにできればそれでいいです。

    いい方法はないでしょうか。

    Toro_Unit (Hiroshi Urabe)

    (@toro_unit)

    8年、 2ヶ月前

    とりあえず、「ブラウザ標準のUIで無い形でプレイヤーを表示したい」 ということであれば、 [audio]ショートコードを使えば実現できます。

    Audio ショートコード – WordPress Codex 日本語版

    また、これはWordPressの標準の音声の埋め込み方法で、「メディアの挿入」から音声を記事に挿入すると、

    [audio mp3="https://example.com/wp-content/uploads/foo.mp3"][/audio]

    のような格好で記事内に埋め込まれます。

    トピック投稿者 free100max

    (@free100max)

    8年、 2ヶ月前

    回答ありがとうございます。

    上記のWordpress標準の音声埋め込みの方法でやってみましたが、GoogleCromeで見ると全く同じバーが表示され、右端にダウンロードアイコンが表示されてしまい、ワンクリックでダウンロードされてしまいます。

    そのダウンロードアイコンを消すか、無効にできるような方法はないでしょうか。

    または、プラグインを使うなど全く別の形でもいいので何かいい方法がありましたらぜひ教えていただけませんでしょうか。

    プラグインもいろいろ試したのですが、PCのみしか反映しないものとか、スマホに対応しているとしても、PCでは専用の音声バーが出るものの、スマホでは上記と同じバーが表示されてしまうものなどがばかりで困っております。

    よろしくお願いいたします。

    munyagu

    (@munyagu)

    8年、 2ヶ月前

    こんにちは

    私は使ったことがないですが、こういうものを使えば幸せになれるかもしれません。

    https://designshack.net/articles/css/custom-html5-audio-element-ui/

    nobita

    (@nobita)

    8年、 2ヶ月前

    こんにちは、

    ボタンを自分で作ればいいのではないでしょうか

    
<audio id="demo2" src="hoge.mp3"></audio>
<div style="font-size:2em;display:flex;">
  <span onclick="document.getElementById('demo2').play()">⏵</span>
  <span onclick="document.getElementById('demo2').pause()">⏸</span>
  <span onclick="document.getElementById('demo2').muted = true">🔇</span>
  <span onclick="document.getElementById('demo2').muted = false">🔊</span>
  <span onclick="document.getElementById('demo2').volume+=0.1">+</span>
  <span onclick="document.getElementById('demo2').volume-=0.1">-</span>
</div>

    コードの実行結果

    詳細

    https://developer.mozilla.org/ja/docs/Web/HTML/Using_HTML5_audio_and_video

    • この返信は8年、 2ヶ月前にnobitaが編集しました。
    トピック投稿者 free100max

    (@free100max)

    8年、 2ヶ月前

    munyaguさま
    nobitaさま

    ご回答ありがとうございます。

    いろいろやってみましたが、PCでサイトを閲覧する際にはいいのですが、スマホのGoogleCromeで閲覧すると、通常のダウンロードアイコンが出る音声バーが表示されてしまうようです。

    あきらめてYoutubeを使うことにします。

    いろいろありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「音声埋め込みについて」には新たに返信することはできません。