2

私は JS と jQuery で書いている仮想ツアー アプリケーションに音楽を追加しようとしていますが、これまでのところ、以下に示すコードは Chrome、FF、IE9、および Opera でうまく動作します。しかし、Windows マシン用に入手できる最新の Safari 5.1.7 では、まったく機能しません... 問題を調査したところ、Safari は音楽を自動再生せず、起動する必要があることがわかりました。手動ですが、再生ボタンをクリックしても何も起こりません。ところで、Safari のコード インスペクターは、オーディオ タグが音楽ソースにあることを示しているので、DOM とは関係がないと思います。私の問題に関するアイデアはありますか？

HTML :

<div id="musicBtns">
    <p>Music:</p>
    <p id="musicPlayBtn">Play</p>
    <p>/</p>
    <p id="musicPauseBtn">Pause</p>
</div>

JS の私の音楽オブジェクト:

var Music = 
    {
        musicBtns: $('#musicBtns'),
        playBtn: $('#musicPlayBtn'),
        pauseBtn: $('#musicPauseBtn'),
        isPlaying: false,

        init: function()
        {
            if(!music.includeMusic) // If the client didn't want any music in the tour app, remove the music btns from the DOM
            {
                this.musicBtns.remove();
            }
            else // Else, setup the audio element
            {
                var parent = this;
                var audio = $('<audio loop="true">');

                if(music.autoplay) 
                {
                    audio.attr('autoplay', 'autoplay');
                    this.isPlaying = true;
                    this.togglePlayPause();
                }

                // Add a source elements and appends them to the audio element 
                this.addSource(audio, music.ogg); // 'music.ogg' is a reference to the path in a JSON file  
                this.addSource(audio, music.mp3);
                this.musicBtns.append(audio);

                // Add event listeners for the play/pause btns
                this.playBtn.click(function()
                {
                    audio.trigger('play');
                    parent.isPlaying = true;
                    parent.togglePlayPause();
                });

                this.pauseBtn.click(function()
                {
                    audio.trigger('pause');
                    parent.isPlaying = false;
                    parent.togglePlayPause();
                });
            }
        },
        addSource: function(el, path)
        {  
            el.append($('<source>').attr('src', path));  
        },
        // Add or remove classes depending on the state of play/pause
        togglePlayPause: function()
        {
            if(this.isPlaying)
            {
                this.playBtn.addClass('underline');
                this.pauseBtn.removeClass('underline');
            }
            else
            {
                this.playBtn.removeClass('underline');
                this.pauseBtn.addClass('underline');
            }
        }
    }

編集:これは Safari のバグでしょうか?

4

2 に答える 2

1

そのため、問題はQuickTimeにあることが判明しました。必要だとは思わなかったので、しばらく前にマシンから削除する必要があると思います。QuickTimeを再インストールした後、Safariはオーディオタグを使用して問題なく音楽を再生します。自動再生も機能します。

ちょっとおかしいですが、ネイティブHTML5オーディオ/ビデオサポートのチャンピオンは、プラグインなしでHTML5オーディオ/ビデオをサポートしていません...

于 2013-03-13T10:33:39.760 に答える
0

SafariのHTML5ビデオでは、再生するように設定する前に「ロード」（バッファを開始するか、すべてをロードする）する必要があるという問題がありました。これにより、実際にはいくつかのWebkitブラウザーで機能するように見えました。だから次のようなもの：

var a = new Audio("file.mp3");
a.load();
a.play();

試すだけの価値があります

于 2013-03-12T09:21:15.623 に答える