1

audioOpera 12.16（現在の最新バージョン）で要素を再生しようとしていますが、ファイルでは機能しないことに気付きましたが、mp3ファイルでは機能しoggます。

現在mp3ファイルのみを使用しており、Operaでは動作していない私のフィドルは次のとおりです。 http://jsfiddle.net/hMnsd/1/

ソリューションは次のようなことをしているようです（w3cウェブサイトで指摘されているように）：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

私は今、この関数を使って音を生成しています:

function notificationSound(){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', "http://"+ document.domain +"/files/notification2.mp3");
    audioElement.setAttribute('type', 'audio/mpeg');
    audioElement.setAttribute('autoplay', 'autoplay');
    //audioElement.load()

    audioElement.addEventListener("load", function() {
        audioElement.play();
    }, true);

}

ファイルを追加するためにogg、必要な構造を生成しようとしましたが、成功しませんでした:

var audioElement = document.createElement('audio');
var audioSource1 = document.createElement('source');
var audioSource2 = document.createElement('source');

//mp3 file
audioSource1.setAttribute('src', "http://"+ document.domain +"/files/notification2.mp3");
audioSource1.setAttribute('type', 'audio/mpeg');

//ogg file
audioSource2.setAttribute('src', "http://"+ document.domain +"/files/notification2.ogg");
audioSource2.setAttribute('type', 'audio/ogg');

audioElement.setAttribute('autoplay', 'autoplay');

audioElement.append(audioSource2); //opera
audioElement.append(audioSource1);

//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
    audioElement.get(0).play();
}, true);

oggファイルを使用して Opera でも動作させるにはどうすればよいでしょうか?

4

2 に答える 2

1

ユーザーが使用しているブラウザを確認してから、ソースを選択します。

var audioElement = document.createElement('audio');
if (navigator.userAgent.search("MSIE") >= 0) {
        audioSource1.setAttribute('src', "http://" + document.domain + "/files/notification2.mp3");
        audioSource1.setAttribute('type', 'audio/mpeg');
 } else if (navigator.userAgent.search("Chrome") >= 0) {
     audioSource2.setAttribute('src', "http://" + document.domain + "/files/notification2.ogg");
     audioSource2.setAttribute('type', 'audio/ogg');
 } else if (navigator.userAgent.search("Firefox") >= 0) {
     audioSource2.setAttribute('src', "http://" + document.domain + "/files/notification2.ogg");
     audioSource2.setAttribute('type', 'audio/ogg');
 } else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
     audioSource1.setAttribute('src', "http://" + document.domain + "/files/notification2.mp3");
     audioSource1.setAttribute('type', 'audio/mpeg');
 } else if (navigator.userAgent.search("Opera") >= 0) {
     audioSource2.setAttribute('src', "http://" + document.domain + "/files/notification2.ogg");
     audioSource2.setAttribute('type', 'audio/ogg');
 }
 audioElement.setAttribute('autoplay', 'autoplay');
 audioElement.addEventListener("load", function () {
     audioElement.play();
 }, true);

あなたの質問を正しく理解していることを願っています。

于 2013-07-22T23:10:49.493 に答える
1

ブラウザー検出の代わりに機能検出を使用します。

function isMpeg()
{
    var a = document.createElement('audio');
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}


function isOgg()
{
    var a = document.createElement('audio');
    return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
}

function isAAC()
{
    var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/mp4; codecs="mp4a.40.2"').replace(/no/, ''));
}

alert(isMpeg());
alert(isOgg());
alert(isAAC());

例: http://jsfiddle.net/Cy9AT/1/

参照: http://diveintohtml5.info/everything.html

またはモダナイザーを使用する

于 2013-07-23T01:01:43.330 に答える