HTML 5 - 細かいmp3を "インライン"で再生

Question

HTML5オーディオサポートを使用してmp3を再生したい。 私はオーディオタグを使用しようとしていましたが、今はjavascriptを使用しています。

私の「プレイヤー」はちょうど小さなプレイ画像になります。押すと、オーディオが再生されます（進行状況を含むすべてのオーディオコントロールではありません）。

私はJavaScriptを使用して再生しようとしています。

function playmp3(url){ 
    var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', url); 
    audioElement.load(); 
    audioElement.play(); 
} 

これは私のコードであり、動作しません。私は自分の再生ボタンである画像をクリックするとOKを実行します。

URLはファイルのURLを含む文字列です。

ChromeとFFの最新バージョンでテストしています。

Answer 1

mp3を再生しようとする前にcanplayイベントをリスニングしようとしています。ブラウザがmp3の再生を開始することができたときに

function playmp3(url){ 
    var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', url); 
    audioElement.load(); 
    audioElement.addEventListener("canplay", function() { 
     audioElement.play(); 
    }); 
} 

canplayイベントが発生したが、それはそれが完了するまでmp3を再生できることを保証するものではありません。ここではそれを行う方法の例を示します。それがあなたの目的に合っていない場合は、loadeddataとcanplaythroughのような聞くことができる他の関連イベントがいくつかあります。