ブログに音楽を流す

音楽を流す前に…どんな音楽が流したいのですか?

1.大好きな日本人ミュージシャンの曲を流したい!
⇒そのミュージシャンが「死後50年」に該当していなければ、たぶんJASRAC管理。JASRACに金払ってからにしてください。(外国曲も無料で流せば著作権法違反。金払ってでも流したい場合、どこで金払うのか知りません)

2.自分が作曲した曲です。
⇒本当にブログで公開するのが最適ですか?
例:muzie

3.著作権をクリアした音楽を、やっぱりブログに流したい
(1)JASRACに金払った。
(2)自作だけどやっぱりブログに流したい
(3)作者が音楽素材として公開 …ブログパーツも有り“BlogTunes”"OtoFrame"Added:2008/May
(4)作者死後50年以上たった著作権が切れたもので、
 (4-1)自分がデータ化したもの
 (4-2)音楽素材としてデータが公開されているもの
⇒多くのブログは、音楽データをアップロードできません。音楽データをアップできるサイトスペースを借りてください。

音楽ファイルの置けないブログに音楽を流す

多くのブログ(例:《Autopage》《eXcite》《Yahoo!》)では、ブログ内に音楽ファイルを置くことができません。 別にサイトスペースをレンタルして、音楽ファイルを置くことになります。(これについては細かい解説は書きません。各サイトスペースの規定と使い方に従ってください)

ここで解説するのは、別サイトスペースにアップした音楽ファイルを、自分のブログに流す方法です。
以下の3条件を考え、小窓を開いて音楽を流す形を考えました。

「音楽小窓」の作り方

以下の枠内のものを、エディター(メモ帳など)へコピーしてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="Keywords" content="【タイトルなど】">
<meta name="Description" content="音楽の小窓">
<title>【タイトルなど】</title>
<style type="text/css">
<!--
/*フォントサイズ、色などを指定*/
body {padding:0;margin:0;
text-align:center;} 
a:link {color:#666;}
a:visited {color:#666;}
a:hover{color:#ff0033;}
a:active {color:#ff0033;}
img{margin:7px;}
table{width:100%;
height:100%;
font-size:10px;
color: #666;}
-->
</style>
<!--下記の数字部分で小窓の大きさを設定-->
<script language="JavaScript">
<!--
function View() {
window.self.resizeTo(220,320);
}
// -->
</script>
</head>
<body onLoad="View()">
<table><tr><td align="center"> 【曲のタイトル】<br>
<embed src="【音楽ファイルのURL】" autostart="true" repeat="true" loop="true" panel="0" width="70" height="30"><br>
Music by <a href="【音楽ファイルの提供元URL】" title="音楽ファイル提供元">
【音楽ファイルの提供元サイト名】</a>
<form><input type="button" value="閉じる" onclick="javascript:window.close();"></form>
</td></tr></table>
</body>
</html>

javascriptが使える場合(例《AutoPage》)

下記のタグで「音楽小窓」を呼び出すと、 メニューバーなどが隠れてカッコイイです。

<a href="#" onClick='window.open("【音楽小窓HTMLのURL】", "Test", "directories=no, fullscreen=no, location=no, menubar=no, toolbar=no, status=no, resizable=yes, scrollbars=yes, left=0, top=0, width=220, height=320")'><noscript></a><a href="【音楽小窓HTMLのURL】" target="_blank"></noscript>曲名など</a>

Sample

“Gloria”

javascriptが使えない場合(例《eXcite》《Yahoo!》)

<a href="【音楽小窓HTMLのURL】" target="_blank">曲名など</a>

のタグで呼び出してください。

Sample

“Gloria”

「音楽小窓」HTMLファイルを作成する必要がない場合

という条件を満たす場合には、下記のタグだけで、「音楽ファイルを小窓で開く」ことができるようです。

<a href="#" onClick='window.open("【音楽ファイルのURL】", "Test", "directories=no, fullscreen=no, location=no, menubar=no, toolbar=no, status=no, resizable=yes, scrollbars=yes, left=0, top=0, width=200, height=200")'>曲名など</a>by <a href="【音楽ファイルの提供元URL】" title="音楽ファイル提供元"><noscript></a><a href="【音楽ファイルのURL】" target="_blank"></noscript>【音楽ファイルの提供元サイト名】</a>

Sample

“Gloria” by 遠来未来

ジオシティーズ:縦型広告

 音楽データをアップするサーバーとして、ジオシティーズを利用する場合、縦型広告と横型広告を選択することができます。 縦型広告は、ページ閲覧の数秒後に、自動で縮小表示に切り替わります。 縦型広告を選択し、「音楽小窓」を作成してみました。
ジオシティーズで音楽小窓 (window.self.resizeTo(210,600);で設定)

音楽素材の例

素材の森(ただし、JASRAC管理曲を無断アップしているサイトもあるので、注意)
遠来未来 / 煉獄庭園 / sentire(使用許可は創作系のみ

謝辞

背景等画像素材:KIGENさまからお借りしております。