スポンサー リンク
スポンサー リンク
Webサイトで使える、FlashベースのオープンソースMP3Playerです。

この手のものは結構ありますが、JavaScriptでもコントロール可能でカスタマイズできるものは結構限られるようです。

最小構成のものを試してみました。



ご紹介

公式ページはこちら





「JS」のページに移動して、player_mp3_js.swfをダウンロードして使います。

参考コードは、Sourceのtemplate_js_0.3.0.zipにあるので、これもダウンロード。

imagesフォルダー、player_mp3_js.html、player_mp3_js.swfを同じ場所におきます。

【HTMLコード(抜粋)】

player_mp3_js.swfを実装します。

こんな感じ。

<object id="myFlash" type="application/x-shockwave-flash" data="player_mp3_js.swf" width="1" height="1">
<param name="movie" value="player_mp3_js.swf" />
<param name="AllowScriptAccess" value="always" />
<param name="FlashVars" value="listener=myListener&amp;interval=500" />
<p>Texte alternatif</p>
</object>


【JavaScriptコード(抜粋)】

        <script type="text/javascript">
            /**
             * private functions
             */
            var sliderPressed = false;
            
            function _getFlashObject(){
                return document.getElementById("myFlash");
            }
            
            function _cumulativeOffset (pElement){
                var valueT = 0, valueL = 0;
                do {
                    valueT += pElement.offsetTop  || 0;
                    valueL += pElement.offsetLeft || 0;
                    pElement = pElement.offsetParent;
                } while (pElement);
                return [valueL, valueT];
            }
            
            /**
             * public functions
             */
            function play() {
                stop();
                
                var mp3_file = "test.mp3";
         //var mp3_file = "http://example.com/test.mp3";
                _getFlashObject().SetVariable("method:setUrl", mp3_file);
                
                _getFlashObject().SetVariable("method:play", "");
            }
            
            function pause() {
                _getFlashObject().SetVariable("method:pause", "");
            }
            
            function stop() {
                _getFlashObject().SetVariable("method:stop", "");
            }
            
            function setPosition(){
                var position = document.getElementById("inputPosition").value;
                _getFlashObject().SetVariable("method:setPosition", position);
            }
            
            function setVolume(){
                var volume = document.getElementById("inputVolume").value;
                _getFlashObject().SetVariable("method:setVolume", volume);
            }
                
                
        </script>
        <!--[if IE]>
        <script type="text/javascript" event="FSCommand(command,args)" for="myFlash">
        eval(args);
        </script>
        <![endif]-->


最小構成なので、動作は「Play」と「Stop」のみです。

Playのコードでは、method:setUrlでMP3ファイルを指定しますが、URLは、相対パスや、絶対パスが使えます。

で、method:playで再生します。



TOP

こんな感じ

サンプルのページです。

MP3 Player (sample)





再生する場合は、リストから選択した後、プレイボタンをクリックするか、「Play」をクリックしてください。







TOP



スポンサー リンク




トップページ| サイトマップ|