36

私のウェブサイトには、いくつかの mp3 を含むディレクトリがあります。PHPを使用して、Webサイトでそれらのリストを動的に作成します。

それらに関連付けられたドラッグ アンド ドロップ機能もあり、それらの mp3 のリストを選択して再生できます。

さて、そのリストを与えて、どうすればボタン (再生) をクリックして、リストの最初の mp3 をウェブサイトで再生させることができますか? （音楽がウェブサイトのどこにあるかも知っています）

4

8 に答える 8

114

new Audio('<url>').play()

于 2012-07-04T14:37:06.237 に答える
29

古いブラウザーで動作するバージョンが必要な場合は、次のライブラリを作成しました。

// source: https://stackoverflow.com/a/11331200/4298200
function Sound(source, volume, loop)
{
    this.source = source;
    this.volume = volume;
    this.loop = loop;
    var son;
    this.son = son;
    this.finish = false;
    this.stop = function()
    {
        document.body.removeChild(this.son);
    }
    this.start = function()
    {
        if (this.finish) return false;
        this.son = document.createElement("embed");
        this.son.setAttribute("src", this.source);
        this.son.setAttribute("hidden", "true");
        this.son.setAttribute("volume", this.volume);
        this.son.setAttribute("autostart", "true");
        this.son.setAttribute("loop", this.loop);
        document.body.appendChild(this.son);
    }
    this.remove = function()
    {
        document.body.removeChild(this.son);
        this.finish = true;
    }
    this.init = function(volume, loop)
    {
        this.finish = false;
        this.volume = volume;
        this.loop = loop;
    }
}

ドキュメンテーション：

Sound3 つの引数を取ります。サウンドのsourceURL、volume(from 0to 100)、およびloop( trueto ループ、to ループでfalseはない)。( とは逆に) 後に
stopすることができます。引数のボリュームとループを再設定します。startremove
init

例：

var foo = new Sound("url", 100, true);
foo.start();
foo.stop();
foo.start();
foo.init(100, false);
foo.remove();
//Here you you cannot start foo any more
于 2012-07-04T14:39:28.177 に答える
9

audioおそらく、新しい HTML5要素を使用してAudioオブジェクトを作成し、mp3 をロードして再生したいと思うでしょう。

ブラウザーの不一致により、このサンプル コードは少し長くなりますが、少し調整することでニーズに合うはずです。

//Create the audio tag
var soundFile = document.createElement("audio");
soundFile.preload = "auto";

//Load the sound file (using a source element for expandability)
var src = document.createElement("source");
src.src = fileName + ".mp3";
soundFile.appendChild(src);

//Load the audio tag
//It auto plays as a fallback
soundFile.load();
soundFile.volume = 0.000000;
soundFile.play();

//Plays the sound
function play() {
   //Set the current time for the audio file to the beginning
   soundFile.currentTime = 0.01;
   soundFile.volume = volume;

   //Due to a bug in Firefox, the audio needs to be played after a delay
   setTimeout(function(){soundFile.play();},1);
}

編集：

Flash サポートを追加するには、タグobject内に要素を追加します。audio

于 2012-07-04T14:28:12.913 に答える
2

HTML5 タグを使用<audio>して、JavaScript を使用して音声を再生できます。

しかし、これはクロスブラウザー ソリューションではありません。最新のブラウザーでのみサポートされています。クロスブラウザーの互換性のために、おそらくそのために Flash を使用する必要があります (たとえば、jPlayer )。

ブラウザの互換性表は、上記のリンクで提供されています。

于 2012-07-04T14:23:08.987 に答える
1

SoundManager 2を試すことができます。タグがサポートされている場合はタグを透過的に処理し、<audio>サポートされていない場合は Flash を使用します。

于 2012-07-04T14:28:13.667 に答える
0

オーディオmp3プレーヤー用のJqueryプラグインhttp://www.jplayer.org/0.2.1/demos/

于 2012-07-05T10:59:11.210 に答える
0

ブラウザーが MP3 再生をサポートし、新しい JavaScript 機能をサポートするのはかなり新しいと仮定すると、jPlayerを確認することをお勧めします。実装方法に関する短いデモチュートリアルを見ることができます。

于 2012-07-04T14:28:28.020 に答える
-1

楽しめ ;）

<html>
<head>
    <title>Play my music....</title>
</head>
<body>
    <ul>
        <li>
        <a id="PlayLink" href="http://www.moderntalking.ru/real/music/Modern_Talking-You_Can_Win(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">U Can Win</a>
        </li>
        <li>
        <a id="A1" href="http://www.moderntalking.ru/real/music/Modern_Talking-Brother_Louie(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">Brother Louie</a>
        </li>
    </ul>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>
于 2012-07-04T15:50:52.593 に答える