1

私は自分のサイト ustreet.com で mp3 プレーヤーを構築しています。このプレーヤーは、HTML に配置したカスタム ボタンで制御できます。

これがどのように見えるかの写真です：

ここに画像の説明を入力

JSript には、再生と一時停止のためのオーディオ オブジェクト コントロールが組み込まれています。

                <div class = "mp3Player" style="display: inline-block; width:100%">

                    <audio id="music" src = "LetsDance.mp3" type = "audio/mp3"></audio>   

                    <a class = "last" style="margin-left: 1em; float: left; display: inline-block; vertical-align:158%; -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); font-size: 100%" onclick="previous()" class="button">►►</a>                    
                    <a class = "play" style="display: inline-block; vertical-align:134%;" onclick="music.play()" class="button">►&lt;/a>
                    <a class = "pause" style="font-weight: bold; display: inline-block; vertical-align:134%;" onclick="music.pause()" class="button">ll</a>
                    <a class = "next" style="margin-right: 1em; float: right; display: inline-block; vertical-align:145%; font-size: 100%" onclick = "next()" class="button">►►</a>                       

                </div>

mp3 ファイル ソース名の配列もあります。

 mp3sources = ["a.mp3","b.mp3","c.mp3","d.mp3"];

これらのボタンによって呼び出されるオーディオ オブジェクトをこの配列と同期する関数を作成する方法を見つけようとしています。サイトが最初に読み込まれると、再生ボタンは mp3sources の最初の文字列をキューに入れます。次のボタンをクリックすると、リスト内の次の曲の頭出しが行われ、最後の曲をクリックすると、配列の前の曲の頭出しが行われます。この関数を書くのを手伝ってください - 私は JScript があまり得意ではありません。私はPHPの方が得意です。

4

1 に答える 1

2

これは完全に機能するコードです (古いブラウザとの互換性のために、いくつかのフラッシュ フォールバックを使用できます):

HTML:

<div class="mp3Player">
    <audio id="music"></audio>
    <a id="last" class="last" class="button">◄◄</a>
    <a id="play" class="play" class="button">►&lt;/a>
    <a id="pause" class="pause" class="button">ll</a>
    <span id="info"></span>
    <a id="next" class="next" class="button">►►</a> 
</div>

JS:

function run() {
    var i = 0; // current song index
    var songList = [
        'a.mp3',
        'b.mp3',
        'c.mp3',
        'd.mp3'];

    var audiocontainer = document.getElementById('mp3Player');
    var ae = document.getElementById('music');
    ae.src = songList[0];
    var infoDiv = document.getElementById('info');
    var btnLast = document.getElementById('last');
    var btnPlay = document.getElementById('play');
    var btnPause = document.getElementById('pause');
    var btnNext = document.getElementById('next');

    //add event handlers
    ae.onplay = function () {
        infoDiv.innerHTML = 'Now playing #' + (i + 1) + ' ' + songList[i];
    };
    ae.onended = function () {
        next();
    };
    btnPlay.onclick = function () {
        //if (ae.paused)
        ae.play();
        //else ae.pause();
    };
    btnPause.onclick = function () {
        ae.pause();
    };
    btnLast.onclick = previous;
    btnNext.onclick = next;
    //ae.play(); //to start playing automatically when when page is loaded

    function previous() {
        i = (i > 0) ? i - 1 : songList.length - 1; // choose previous index
        ae.setAttribute("src", songList[i]);
        ae.play();
    }

    function next() {
        i = (i < songList.length - 1) ? i + 1 : 0; // choose next index
        ae.setAttribute("src", songList[i]);
        ae.play();
    }
}

http://jsfiddle.net/F35Fw/5/ (基本的な CSS スタイリングのみ)
http://jsfiddle.net/F35Fw/5/show (コンピューターにダウンロードするためのソース ページ)

于 2013-07-27T21:55:35.620 に答える