Tech Rogue◆コンピュータ情報: #snd midi

ラベル #snd midi の投稿を表示しています。すべての投稿を表示

2023年5月22日月曜日

2021年6月9日水曜日

[データ][midi] Warren Trachtman's Ragtime MIDI Website

Welcome

This section of my site contains MIDI files, which I have sequenced, of ragtime

piano pieces by :

Scott Joplin, James Scott, Joseph Lamb, Jelly-Roll Morton, Eubie Blake, and others.

Your computer can sound like a REAL PIANO when you play these MIDI files!

click here for my Steinway Grand Piano soundfonts and samples

Warren Trachtman's Ragtime MIDI Website

http://www.trachtman.org/ragtime/index.htm

http://www.trachtman.org/MIDI/Joplin/BreezeFromAlabama2.mid

2019年10月16日水曜日

[code] ブログでMP3を鳴らす
2019-10-08
ブログでMP3を鳴らす【はてな、Blogger】直接埋め込む方法も
ブログ上でMP3ファイルを再生する方法を書くエントリとなります。
このブログは、はてなブログで運営しているんですが、私はこことは別にGoogle Bloggerで英語勉強ブログを書いています。英語の勉強ブログを書いていると、単語の音声ファイルを貼り付けたくなることがけっこうあります。こう、なんか無いと画竜点睛を欠くような気がして。
と、いうわけでブログ上でMP3ファイルのサウンドを鳴らすためにはどうしたらいいか、調べた内容を書いていきます。本エントリではGoogleドライブに置いたファイルの再生と、ブログ記事上に直接サウンドデータを埋め込む方法を紹介します。
■Googleドライブに置いたファイルの再生
audioタグとファイル置き場の話
audioタグはHTMLのなかで音声データを再生するのに使われるタグです。こんな風に使います。
＜audio src="sound/sound.mp3" preload="auto" controls＞＜/audio＞
audioタグをブログのHTML編集画面に書き込むと、↓このような再生プレイヤーがブログの記事上に表示されるようになります。ちなみにこのプレイヤーはブラウザごとに見栄えが変わります。
上に書いたタグのなかの src="sound/sound.mp3" ってのは音声ファイルを置いている場所を示しています。src＝source の略ですね。ブログの場合は直接ファイルを格納しておく場所がないので、多くの場合URLを使ってインターネット経由でファイルを参照します。
＜audio src="https://www.〇△□.com/~~~/sound.mp3" preload="auto" controls＞＜/audio＞
っていう形ですね。
で、多くのブロガー諸氏が困るのが「どこに置けばいいんじゃい！」って話。
Dropboxなんかがサクッと置ける場所になるんですが、使ったことの無い人は使い方を調べたり、そもそも登録するの面倒くせぇと思うでしょう。さらにそういう管理しなければならないもの（Dropboxのアカウント）が増えるのは嫌だと感じる方もいらっしゃることと思います。
そこで、Google Bloggerを使っている方はGoogleが提供するファイル置き場（ファイルストレージ）であるGoogleドライブを使おうと考えます。でもGoogleドライブは後述するように単にURLを貼り付けるだけでは、音声を鳴らすことができません。こいつをどうにかしようというお話でございます。
Googleドライブに置いたファイルを直接鳴らそう！
まずGoogleドライブにファイルを置いて、共有可能なリンクを取得します。こんな感じのURLを取得できるかと思います。このURLは私の環境で19年10月に取得できたものです。Google側の仕様変更が入るとURLが変わることもあると思います。
https://drive.google.com/open?id=XXXXXXXXXXXXXXXXX
Xが連続しているところは、ファイルごとに発行されるidが入ります。30桁くらいのランダムな文字列です。このURLをAudioタグに直接仕込んでも、音は鳴りません。理由は説明すると長くなるので後述します。とにかく上記のフォーマットのURLでは音が鳴りません。
じゃあどーするか？
URLを修正する必要があります。修正すればGoogleドライブに置いたサウンドデータをブログ上で鳴らすことができます。URLを以下のように修正しましょう。
https://drive.google.com/open?id=XXXXXXXXXXXXXXXXX
　　　　　　　　　　　　↓
https://drive.google.com/uc?id=XXXXXXXXXXXXXXXXX　　[★]
openをucに変えるだけ。こんだけです。そしてこのURLをaudioタグのsrcにぶち込む。こんな感じ。

これでGoogleドライブに置いた音声をブログ上で鳴らすことができます。

ホンモノのエンジニアになりたい
https://www.engineer-log.com/entry/2019/10/08/sound-mp3

＜audio＞: 埋め込み音声要素
HTML の＜audio＞要素は、文書内に音声コンテンツを埋め込むために使用します。
この要素は、1つまたは複数の音源を含むことができます。
音源は src 属性または＜source＞要素を使用して表し、ブラウザーがもっとも適切な音源を選択します。
また、 MediaStream を使用してストリーミングメディアを指し示すこともできます。
上記の例は、＜audio＞要素の単純な使用方法を示しています。
＜img＞要素と同様の方法で、埋め込みたいメディアへのパスを src 属性に設定します。
他にも自動再生や繰り返しを行うかどうか、ブラウザーの既定のオーディオコントロールを表示したいかどうか、などの情報を指定する属性を含めることができます。
開始および終了タグ＜audio＞＜/audio＞の中のコンテンツは、この要素に対応してないブラウザーで代替として表示されます。
■属性
この要素にはグローバル属性があります。
autoplay
論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。
メモ: 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。自動再生ガイドには autoplay の正しい使い方についての追加情報があります。
controls
この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。
crossorigin
この列挙型の属性は、関連する音声ファイルを取得する際に CORS を使用するかを示します。CORS が有効なリソースは、汚染されることなく＜canvas＞要素で再利用できます。次の値が使用できます:
anonymous
資格情報を伴わずにオリジン間リクエストを実行します。すなわち、 Cookie や X.509 証明書がない Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。
use-credentials
資格情報を伴ってオリジン間リクエストを実行します。すなわち、Cookie や X.509 証明書を伴う Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が存在しない場合、リソースは CORS リクエストなしで (すなわち、 Origin: HTTP ヘッダーなしで) 取得され、＜canvas＞要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性を参照してください。
currentTime
currentTime を読み取ると、倍精度浮動小数点値で、現在の音声の再生位置を秒単位で示す値を返します。音声のメタデータが利用できない場合—この場合はメディアの開始時刻や長さを知ることができなくなるので— currentTime は再生が始まる時刻を示したり、変更したりすることができます。そうでない場合は、 currentTime を設定すると現在の再生位置を指定された時刻に設定し、メディアが現在読み込まれていれば、その位置にシークします。
音声がストリーミングである場合は、ユーザーエージェントはデータがメディアバッファーからあふれた場合に一部を受け取ることができません。他にも音声が0秒から始まらないメディアタイムラインを持っている場合もあり、 currentTime をそれより前の時刻に設定すると失敗します。例えば、音声のメディアタイムラインが12時間目に始まる場合、 currentTime を 3600 に設定すると、現在の再生位置をメディアの開始位置の前に設定しようとするので、失敗します。 getStartDate() メソッドは、メディアのタイムラインの参照フレームの開始点を特定するのに使用することができます。
disableRemotePlayback
論理属性で、有線 (HDMI, DVI, など) や無線技術 (Mirachast, Chromecast, DLNA, AirPlay, など) で接続された機器のリモート再生機能を無効にするために使用します。詳しくはこの提案中の仕様書をご覧ください。
Safari では、代替として x-webkit-airplay="deny" を使用することができます。
duration 読取専用
倍精度浮動小数点値で、メディアのタイムライン上の音声の長さ (合計の長さ) を秒単位で示します。要素上にメディアがない場合や、メディアが有効でない場合は、返値は NaN になります。メディアの終わりが分からない場合 (長さの分からないライブストリーミング、ウェブラジオ、 WebRTC から来たメディアなど)、この値は +Infinity になります。
loop
論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。
muted
論理型の属性で、音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false です。
preload
列挙型の属性で、ユーザーに取って最良の結果をもたらすと作者が考えていることのヒントをブラウザーに伝えるためのものです。以下の値のうちひとつを持つことができます。
none: 音声を事前に読み込むべきではないことを示します。
metadata: 音声のメタデータ (例えば、長さ) を読み込みます。
auto: ユーザーが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
空文字列: これは auto 値と同義です。
既定値はブラウザーによって異なります。仕様書では metadata にするよう助言しています。
使用上のメモ:
autoplay 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。
仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。
src
埋め込む音声コンテンツの URL を指定します。なお、この属性は HTTP access controls に従います。この属性を省略し、audio 要素の子要素として配置した＜source＞要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。
イベント
イベント名発生する時
audioprocess ScriptProcessorNode の入力バッファが処理可能になった。
canplay ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。
canplaythrough ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。
complete OfflineAudioContext のレンダリングが終了した。
durationchange duration 属性が更新された。
emptied メディアが空になった。例えば、このイベントはメディアがすでに読み込まれた (または部分的に読み込まれた) 状態で、再読み込みのために load() メソッドが呼び出された場合など。
ended メディアの末尾に達したために再生が停止した。
loadeddata メディアの最初のフレームが読み込み終わった。
loadedmetadata メタデータを読み込んだ。
pause 再生が一時停止した。
play 再生が始まった。
playing データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。
ratechange 再生レートが変更された。
seeked シーク操作が完了した。
seeking シーク操作が始まった。
stalled ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。
suspend メディアデータの読み込みが停止した。
timeupdate currentTime 属性で示されている時刻が更新された。
volumechange 音量が変更された。
waiting 一時的なデータの不足により、再生が停止した。

HTML5
http://html5.cyberlab.info/elements/embedded/audio.html

■使用上のメモ
ブラウザーはすべてが同じファイル形式および音声形式に対応しているわけではありません。内部に含められた＜source＞要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。
＜audio controls＞
＜source src="myAudio.mp3" type="audio/mpeg"＞
＜source src="myAudio.ogg" type="audio/ogg"＞
＜p＞Your browser doesn't support HTML5 audio. Here is
a ＜a href="myAudio.mp4"＞link to the audio＜/a＞ instead.＜/p＞
＜/audio＞
私たちは大量の綿密なメディアファイル形式とその中で使用することができる音声コーデックのガイドを提供しています。また、動画で対応しているコーデックのガイドも利用することができます。
他の使用上のメモ:
controls 属性を指定しない場合、音声プレイヤーはブラウザーの既定のコントロールを含めません。 JavaScript と HTMLMediaElement API を使用して、独自のカスタムコントロールを作成することができます。
音声コンテンツを詳細に制御できるように、 HTMLMediaElement はさまざまなイベントを発行します。これは音声の読み込みプロセスを監視する方法も提供するので、エラーを監視したり、再生や捜査を始めることができるようになったことを検出したりすることができます。
Web Audio API を使用すると、既存の音声ファイルのストリーミングではなく、 JavaScript コードから音声ストリームを直接生成および操作することもできます。
＜audio＞要素は＜video＞要素と同じような方法で字幕を持つことができません。 Ian Devlin による WebVTT and Audio で、役立つ情報や作業があります。
HTML の＜audio＞要素の使用に関する良い情報源として、映像および音声コンテンツの初心者向けチュートリアルがあります。
■CSS でのスタイル付け
＜audio＞要素は既定では固有の視覚的な出力を持ちませんが、
controls 属性が指定されると、ブラウザーの標準のコントロールが表示されます。
既定のコントロールは display の値に既定で inline を持っており、テキストブロックなどの中に置いておきたい場合でない限り、配置やレイアウトを制御しやすくするために、値を block に設定することは、多くの場合は良い考えです。
既定のコントロールは、ブロックを単位としてて影響するプロパティでスタイル付けすることができるので、 border や border-radius, padding, margin 等を指定することができます。しかし、音声プレイヤー内の個別のコンポーネントはスタイル付けすることができず (例えば、ボタンの寸法やアイコンの変更、フォントの変更など)、またコントロールはブラウザーごとに異なります。
ブラウザー間で一貫したルック＆フィールを実現するには、カスタムコントロールを作成する必要があるでしょう。これは好きな方法でマークアップおよびスタイル付けをすることができ、 JavaScript と HTMLMediaElement API を使用することで、これらの機能を結合することができます。
動画プレイヤーのスタイル付けの基本は、便利なスタイル付けテクニックをいくつか紹介しています。これは＜video＞の文脈で書かれたものですが、多くは＜audio＞にも同様に適用されます。
トラックの追加と削除の検出
addtrack および removetrack イベントを用いると、＜audio＞要素でトラックが追加されたり削除されたりしたことを検出することができます。しかし、これらのイベントは＜audio＞要素自身に直接送信されるわけではありません。代わりに、＜audio＞の HTMLMediaElement 内にある、要素に追加されたトラックの種類に対応するトラックリストオブジェクトに送信されます。
HTMLMediaElement.audioTracks
メディア要素のオーディオトラックのすべてを含む AudioTrackList です。 addtrack のリスナーをこのオブジェクトに追加すると、新しいオーディオトラックが要素に追加された時に通知を受け取ることができます。
HTMLMediaElement.videoTracks
この VideoTrackList オブジェクトに addtrack リスナーを追加することで、要素に動画トラックが追加されたときに通知を受け取ることができます。
HTMLMediaElement.textTracks
この TextTrackList オブジェクトに addtrack リスナーを追加することで、要素にテキストトラックが追加されたときに通知を受け取るkとができます。
メモ: ＜audio＞要素であっても、動画やテキストトラックリストを持っており、インターフェイスの実装の使用が奇妙に見えますが、実際に動画を表示するために使用することができます。
例えば、次のようなコードで＜audio＞要素で音声トラックが追加されたり削除されたりしたときを検出することができます。
var elem = document.querySelector("audio");
elem.audioTrackList.onaddtrack = function(event) {
trackEditor.addTrack(event.track);
};
elem.audioTrackList.onremovetrack = function(event) {
trackEditor.removeTrack(event.track);
};
このコードは音声トラックが要素で追加および削除されることを監視し、トラックエディターの論理関数を呼び出すことで、エディターにおける利用できるトラックの一覧でトラックを登録や削除を行います。
addtrack および removetrack イベントを監視するには、 addEventListener() を使用することもできます。
例
基本的な使用法
以下の例は＜audio＞要素で OGG ファイルを再生する単純な例を示しています。ページで許可されていれば、 autoplay 属性によって自動再生され、代替コンテンツも含んでいます。
＜!-- シンプルな音声再生 --＞
＜audio
src="AudioTest.ogg"
autoplay＞
あなたのブラウザーは＜code＞audio＜/code＞要素に対応していません。
＜/audio＞
いつ自動再生が動作するのか、自動再生を使用する許可の取得方法、いつどのように自動再生を使用するのが適切であるのかについては、自動再生ガイドをご覧ください。
＜source＞要素を伴う＜audio＞要素
この例では、埋め込まれる音声トラックを、＜audio＞要素の直接の src 属性ではなく、内部の＜source＞要素のものを使用して指定しています。これは type 属性の中でファイルの MIME タイプを含めることで、ブラウザーがそのファイルを再生できるかどうかを知ることができ、そのファイル再生できないときに時間を浪費しません。
＜audio controls＞
＜source src="foo.wav" type="audio/wav"＞
あなたのブラウザーは＜code＞audio＜/code＞要素に対応していません。
＜/audio＞
複数の＜source＞要素を持つ＜audio＞
この例は複数の＜source＞要素を含んでいます。ブラウザーは最初の source 要素 (Opus) を読み込もうとします。再生することができれば、2番目 (vorbis) と3番目 (mp3) の読み込みは行われません。
＜audio controls＞
＜source src="foo.opus" type="audio/ogg; codecs=opus"/＞
＜source src="foo.ogg" type="audio/ogg; codecs=vorbis"/＞
＜source src="foo.mp3" type="audio/mpeg"/＞
＜/audio＞
アクセシビリティの考慮事項
台詞のある音声には、実際にコンテンツを説明する字幕と文字化情報transcriptを提供するべきです。 WebVTT を使用して字幕を指定すると、聴力を失った人が、音声の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、録音されたコンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で録音の内容を確認できるようになります。
自動字幕サービスが使用されている場合は、生成されたコンテンツが元の音声を正しく表現しているかを確認することが重要です。
＜audio＞要素は直接 WebVTT に対応していません。機能を提供するライブラリまたはフレームワークを探すか、字幕を表示するコードを自分自身で書くかする必要があります。一つの選択肢として、＜video＞要素が WebVTT に対応しているので、これで音声を再生するというものもあります。
字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。例えば、以下の WebVTT では、角括弧を使用して口調や感情を閲覧者に示しています。これによって音楽、物音、効果音などの雰囲気を確立するのに役立ちます。
1
00:00:00 --＞ 00:00:45
[エネルギチックなテクノ音楽]
2
00:00:46 --＞ 00:00:51
タイムキーパーのポッドキャストのようこそ！このエピソードでは、私たちはどちらのスイス時計が腕時計かを議論します？
16
00:00:52 --＞ 00:01:02
[笑い] ごめん！言いたかったのは、どの腕時計がスイスの腕時計か？です。
また、＜audio＞要素に対応していないブラウザーを使用している閲覧者向けのフォールバックとしていくらかのコンテンツ (直接ダウンロードするリンクなど) を提供するのは良い習慣です。
＜audio controls＞
＜source src="myAudio.mp3" type="audio/mpeg"＞
＜source src="myAudio.ogg" type="audio/ogg"＞
＜p＞
Your browser doesn't support HTML5 audio.
Here is a ＜a href="myAudio.mp4"＞link to download the audio＜/a＞ instead.
＜/p＞
＜/audio＞
MDN 字幕とクローズドキャプション - プラグイン
Web Video Text Tracks Format (WebVTT)
WebAIM: Captions, Transcripts, and Audio Descriptions
MDN WCAG を理解する ― ガイドライン 1.2 の解説
Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0

HTML5
http://html5.cyberlab.info/elements/embedded/audio.html

2019年3月16日土曜日

[ウェブ][TunesToTube & Googleフォト], 音楽ファイルをGoogleフォトにアップロード

[ウェブ][TunesToTube & Googleフォト], 音楽ファイルをGoogleフォトにアップロード

[TunesToTube]
サイト「TunesToTube」に自分のGoogleアカウントでログイン
V
「Upload Files」をクリックして、複数の音楽ファイルを選択
V
アップロード
V
OR Get the image from the MP3's ID3 Tag:の後の「Get ID3 Tag」をクリック
V
Privateを選択しYouTubeにアップロード
V
これで、自分のYouTubeアカウントに、非公開の形で変換された動画がアップロードされる
V
YouTubeにアップロードした動画をダウンロード
V
それをGoogleフォトにアップロード

フォト - Google フォト
Googleフォトというと、無料ながら、容量無制限で画像ファイルと、
動画ファイルをアップロードできるサービスとして、非常に便利なので、私も、写真の管理に利用している。
ふと、私が持っているラジオの録音を、Googleフォトにアップロードして管理できないだろうか？と思い試してみた。
というのも、Googleフォトは、写真だけでなく、動画も無制限でアップロードできるから、
ラジオの録音を簡単に動画ファイルに変換できたら、Googleフォトで管理できそうだからだ。
そのためには、次のようなツールがあるといい。
・MP3やM4A、AACなどの音声ファイルを複数一括してMP4動画ファイルに変換できる
・動画を生成時に、MP3タグから抽出した曲名とミュージシャン名をテロップとして付けてくれる
TunesToTube - Upload an MP3 to YouTube in HD
何かいいツールをないかと探していて見つけたのが、「TunesToTube」というWebサービス。
(1)上記サイトに、自分のGoogleアカウントでログインする
(2)「Upload Files」をクリックして、複数の音楽ファイルを選択し、アップロードをする
(3)次に、OR Get the image from the MP3's ID3 Tag:の後の「Get ID3 Tag」をクリックする
(4)Privateを選択し、YouTubeにアップロード
これで、自分のYouTubeアカウントに、非公開の形で変換された動画がアップロードされる。
非公開でアップロードすれば、音源の著作権問題で削除されることもないので、ご心配なく。
アップロードした動画をダウンロードし、それをGoogleフォトにアップロードしたら、
Googleフォトからラジオ番組が聴けるようになった。
Googleフォトにライブラリを置けば、スマホなどで宅外でもモバイル環境で自由に聴くことができる。
容量も無制限だし、これは、なかなか便利でいい。
さらに、自動化を進め、毎日録音したラジオ番組を自動で動画に変換し、Googleフォトにアップロードできないか、
さらに検討を進めたいと思う。
関連記事：
「Google Photos」に動画をアップロード：トドのつまりは・・・　V2：So-netブログ

コンテンツって言い方、嫌いだけど
https://content.blog.so-net.ne.jp/2018-07-01

[データ]音声データをブログに貼る
Google Driveでデータ共有
Googleの無料で使えるクラウドストレージ「Google Drive」を使えばバッチリ。
こちらは無料登録でも15GB。かなり余裕がありますね。
自分のドライブにアクセスしたら、データはデスクトップからドラッグ＆ドロップでアップロード可能。すごい便利。
メニュー表示で「共有可能なリンクを取得」をクリック。
これでこのデータはリンクの共有ができます。
この時点でURLもクリップボードにコピーされているので、あとはペーストするのみ。
＜audio src="https://drive.google.com/◯◯◯.mp3" controls＞＜/audio＞
↓

こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
後半デジャブっぽい。
その他のストレージサービスでもいけるっぽい
試してないけどAmazon Driveとかみたいな他のクラウドストレージサービスでもいけるっぽいので、どれかしら登録してる人はまずはお試しあれ。

SAKMAG
https://www.sakumamatata.com/2016/11/iphonemp3.html

┌─ブログ
│
│
│
├One Drive
├Google Drive
├Box
├Amazon Cloud
├Dropbox
└.....

gfgfgd pc

■HTMLソース内に再生プレーヤーを入れたい場合
デスクトップなどに、MP3ファイル準備します。
↓
FTPソフトなどでホームページがいるサーバーに入ります。
↓
MP3ファイルを載せたいページと同じファイル階層へ行って、MP3ファイルをドラッグして置きます。
↓
MP3ファイルを載せたいhtmlページをダウンロードして、バックアップ保存（超大事）
↓
同じhtmlの分身コピーを作って、本番用を作ります。
↓
そしたら載せたい箇所に下記コードを入れます！
＜audio src="Mp3のファイル名.mp3" controls="controls"＞＜/audio＞
↓

音声を再生するには、audioタグをサポートしたブラウザが必要です。

↓
これで1回、htmlファイルをご自身のPCで使っているブラウザにドラッグしてみてください
正しければ主要ブラウザでは再生プレーヤーが表示されます。

Web Unitwoi
https://web.unitwoi.com/2016/07/04/audio_how_to_publish/

■Google（Gmail)アカウントさえあれば出来る編
天下のGmailがあれば大体の事は出来てしまいます。
Googleさまさまですね。
ログインしてGoogleドライブに入りましょう
↓
左側の「新規」ボタンをクリックして「ファイルのアップロード」をクリック
↓
自分のPCのフォルダを選ぶ画面になりますので、音声mp3データを選んで「開く」ボタン
↓
アップロードが始まります。容量が重いと時間がかかります。
↓
アップロード出来たらボタンが出来てると思います。これを右クリック
↓
「共有可能なリンクを取得」を押す
↓
このURLをコピーして、載せたい部分に張ります
↓
これで、このURLを知ってる方のみ、フォルダだけを開けて、音声が聞ける、という。
この音声の公開を終了したい場合はGoogleドライブでこのファイルを右クリック「共有」を選んで・・・
「オフ」を選べば、閲覧権限が非公開になります。

Web Unitwoi
https://web.unitwoi.com/2016/07/04/audio_how_to_publish/

アップロードする場所について
自分のホームページやサイト用にサーバーをレンタルしてる人は、もちろんそこを使えばOK。
でも、ブログサービスのみ
（はてなブログとかlivedoorブログ、FC2ブログ、bloggerなど）
を使ってる人でデータをアップロードできるようなサーバーを持ってない人ちょっと困っちゃいますよね。
でも大丈夫です、いろいろ方法あります。
▼Dropboxでデータ共有
業界シェアNo.1っぽいクラウドストレージ「Dropbox」。
これを使えばアップロードできちゃいます。
無料登録でも2GBの容量をもらえるので、MP3保管するくらいならぜんぜん余裕。
有料プラン使ってる人なら1TBとか使えちゃうので、Soundcloudよりも大量にアップロード可能です。笑
Dropbox内には「Public」というフォルダがもともとあるので、そこに対象のファイルをアップロード。
ドラッグ＆ドロップでOK。とっても簡単です。
ちなみに僕はデータを整理するために「Public」フォルダ内に「audio」ってフォルダを作ってそこにアップしてます。
「Public」フォルダ直ブッコミでもOKだし、僕みたいに別のフォルダを作ってその中に入れても平気です。
アップロードが完了したら、ファイルを選択すると「公開リンクをコピー」という項目が表示されるのでクリック。
こんな感じでリンクをコピーしたら、あとはペーストするだけ。

こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
▼Google Driveでデータ共有
Googleの無料で使えるクラウドストレージ「Google Drive」を使えばバッチリ。
こちらは無料登録でも15GB。かなり余裕がありますね。
自分のドライブにアクセスしたら、データはデスクトップからドラッグ＆ドロップでアップロード可能。すごい便利。
メニュー表示で「共有可能なリンクを取得」をクリック。
これでこのデータはリンクの共有ができます。
この時点でURLもクリップボードにコピーされているので、あとはペーストするのみ。

こんな感じで赤字の部分をクリップボードからコピーしたURLに書き換えてあげればOK。
これだけ。
後半デジャブっぽい。
その他のストレージサービスでもいけるっぽい
試してないけどAmazon Driveとかみたいな他のクラウドストレージサービスでもいけるっぽいので、どれかしら登録してる人はまずはお試しあれ。

SAKMAG
https://www.sakumamatata.com/2016/11/iphonemp3.html

ブログ記事中に音声や音楽ファイルプレイヤーを埋め込む方法
ロボ (id:hyper-robo) 270日前
どうも、バウリンガルです
今回はブログ上でmp3ファイルを再生する方法
僕は主にGoogle翻訳音声を再生して遊んでます
mp3なのでGoogle翻訳だけじゃなく普通に音楽などを再生させることも出来ますが、権利とかね、色々あるから。ね
正直どこに需要があるのかわかりません
だが少なくとも僕にはあった！
ネタ記事にしか使ってないけど、なんか面白くない
こんなもん面白いと思ってるのは地球で自分だけという可能性も多少、いや微細に孕んでおりますが、解説していきます
スマホからも同じように出来ると思いますがPC向け解説になっています。ごめんね
Google翻訳音声をダウンロードする
まずは再生するための音声ファイルを作りましょ
Google翻訳のページから直接音声ファイルはダウンロード出来ないと思います。多分
ってことでこのサイト
Sound of Text
こちらをお借りしていきましょね
使い方はくっそ簡単でして、登録も何も不要です
Textのボックスに喋らせたい言葉を入力なりコピペして
下のVoiceで言語を選びSubmitで出力するだけです
日本語で喋らせたければTextに日本語を、VoiceでJapaneseを選択して
Submitを押すと下に生成されます
Soundsからテスト試聴とダウンロードが可能になります
ファイルの拡張子はmp3ですね
注意点として、音声はグーグル翻訳のものなのですが上記のサイトで翻訳自体は出来ません
『テキストボックスに日本語を書いて英語で出力』しようとしても出ません
なので面倒ですが、日本語を英語に翻訳してダウンロードしたい場合はまず本家グーグル翻訳で
日本語→英語に変換、英文をコピー、こちらのサイトにペーストの手順となります

世の中褒めロボ
https://hyper-robo.hatenablog.com/entry/onsei

[test:success]
外部サイトリンクを貼る,mp3ファイル,
＜audio src="http://www.jazz-on-line.com/a/mp3a/PARP3089.mp3" controls="controls"＞＜/audio＞
..

ggfdg pc

[test:failed]
YouTubeリンクを貼る
＜audio src="https://youtu.be/iMiNHCMFj1M" controls="controls"＞＜/audio＞
..

ggfdg pc

[test:failed]
外部サイトリンクを貼る,midiファイル,
＜audio src="http://www.trachtman.org/MIDI/Joplin/BreezeFromAlabama2.mid" controls="controls"＞＜/audio＞
..

ggfdg pc

[test:failed]
外部サイトリンクを貼る,midiファイル,
＜audio src="http://www.trachtman.org/MIDI/Joplin/felicity.mid" controls="controls"＞＜/audio＞
..

ggfdg pc

Welcome
This section of my site contains MIDI files, which I have sequenced, of ragtime
piano pieces by :
Scott Joplin, James Scott, Joseph Lamb, Jelly-Roll Morton, Eubie Blake, and others.
Your computer can sound like a REAL PIANO when you play these MIDI files!
click here for my Steinway Grand Piano soundfonts and samples

Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/BreezeFromAlabama2.mid

Scott Joplin (1868 - 1917)

Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/felicity.mid
http://www.trachtman.org/MIDI/Joplin/kismet.mid
http://www.trachtman.org/MIDI/Joplin/EasyWinners.mid

Scott Joplin (1868 - 1917)

Warren Trachtman's Ragtime MIDI Website
http://www.trachtman.org/ragtime/index.htm
http://www.trachtman.org/MIDI/Joplin/felicity.mid
http://www.trachtman.org/MIDI/Joplin/kismet.mid
http://www.trachtman.org/MIDI/Joplin/EasyWinners.mid

Old Time Radio : Free Audio : Download & Streaming : Internet Archive

Old Time Radio
http://archive.org/details/oldtimeradio

2017年6月8日木曜日

John Roache's Ragtime Piano MIDI Library

Welcome to John Roache's
Ragtime Piano MIDI Library
"Helping to spread the
JOY OF RAGTIME
to the internet" IN THE RAGTIME STORE:
JOHN'S CDs ROBIN FROST FOLIOS
BOOKS & TAPES

John Roache's Ragtime Piano MIDI Library
http://www.johnroachemusic.com/

What Is Ragtime, Stride and Novelty Piano?
NOTE: In order to fully view and hear the music examples on this page you must
be using web browser software which is capable of playing a MIDI music
sequence while displaying the page. Netscape 3 is highly recommended. To hear
the music examples just click

John Roache's
Ragtime Piano MIDI Library
http://www.johnroachemusic.com/ragtime.html
http://www.johnroachemusic.com/midiragger/smblue2.mid
http://www.johnroachemusic.com/midiragger/smblue1.mid
http://www.johnroachemusic.com/midiragger/smblue1.mid
http://www.johnroachemusic.com/midiragger/bluinblk.mid

登録: 投稿 (Atom)