ユーザーがクリックすると音が鳴るサイトを作りました。音が重ならないようにするには、コードを追加する必要がありました。

n.pause();
n.currentTime = 0;
n.play();

ただし、これによりエラーが発生します。 The play() request was interrupted by a call to pause()
サウンドイベントがトリガーされるたびに、別のトリガーの直後に起動します。サウンドは引き続き正常に再生されますが、このエラーメッセージが常にポップアップするのを防ぎたいと思います。何か案は？

私も最近この問題に遭遇しました-これはとの間の競合状態である可能性がplay()ありpause()ます。この問題への参照、またはここに関連する何かがあるようです。

以下のよう@Patrickは指摘し、pause約束（または何か）を返していないので、上記の解決策は機能しませんありません。MDNは上のドキュメントを持っていませんがpause()で、メディア要素のためのWC3ドラフト、それは言います：

media.pause（）

paused属性をtrueに設定し、必要に応じてメディアリソースをロードします。

したがってpaused、タイムアウトコールバックで属性を確認することもできます。

このすばらしいSO回答に基づいて、ビデオが本当に再生されている（または再生されていない）かどうかを確認できる方法を示します。これにより、エラーなしで安全にplay（）をトリガーできます。

var isPlaying = video.currentTime > 0 && !video.paused && !video.ended 
    && video.readyState > 2;

if (!isPlaying) {
  video.play();
}

それ以外の場合は、@ Patrickの答えが機能するはずです。

何時間にもわたって作業した後、私は完璧な解決策を見つけました。

// Initializing values
var isPlaying = true;

// On video playing toggle values
video.onplaying = function() {
    isPlaying = true;
};

// On video pause toggle values
video.onpause = function() {
    isPlaying = false;
};

// Play video function
function playVid() {      
    if (video.paused && !isPlaying) {
        video.play();
    }
} 

// Pause video function
function pauseVid() {     
    if (!video.paused && isPlaying) {
        video.pause();
    }
}

その後、できるだけ早く再生/一時停止を切り替えることができ、正しく動作します。

私はこの問題に遭遇し、pause（）を押してからplay（）を押す必要がある場合がありますが、pause（）。then（）を使用すると、未定義になります。

一時停止してから150ミリ秒後に再生を開始すると、問題が解決することがわかりました。（できればGoogleですぐに修正します）

playerMP3.volume = 0;
playerMP3.pause();

//Avoid the Promise Error
setTimeout(function () {      
   playerMP3.play();
}, 150);

この正確な問題に関する記事をhttps://developers.google.com/web/updates/2017/06/play-request-was-interruptedに公開しました。これにより、発生している問題とその修正方法が正確にわかります。

それを試してみてください

n.pause();
n.currentTime = 0;
var nopromise = {
   catch : new Function()
};
(n.play() || nopromise).catch(function(){}); ;

この解決策は私を助けました：

n.cloneNode(true).play();

ソリューションがどれほど複雑かによっては、これが役立つ場合があります。

var currentPromise=false;    //Keeps track of active Promise

function playAudio(n){
    if(!currentPromise){    //normal behavior
        n.pause();
        n.currentTime = 0;
        currentPromise = n.play();    //Calls play. Will store a Promise object in newer versions of chrome;
                                      //stores undefined in other browsers
        if(currentPromise){    //Promise exists
            currentPromise.then(function(){ //handle Promise completion
                promiseComplete(n);
            });
        }
    }else{    //Wait for promise to complete
        //Store additional information to be called
        currentPromise.calledAgain = true;
    }
}

function promiseComplete(n){
    var callAgain = currentPromise.calledAgain;    //get stored information
    currentPromise = false;    //reset currentPromise variable
    if(callAgain){
        playAudio(n);
    }
}

これは少しやりすぎですが、独自のシナリオでPromiseを処理するときに役立ちます。

ここで提案された解決策は私にとっても効果的でもなかったため、他のものを探していたところ、@ dighanがbountysource.com/issues/で提案した解決策を見つけました

だからここに私の問題を解決したコードがあります：

var media = document.getElementById("YourVideo");
const playPromise = media.play();
if (playPromise !== null){
    playPromise.catch(() => { media.play(); })
}

それでもコンソールにエラーがスローされますが、少なくともビデオは再生されています:)

私が理解したように、これのより良い解決策かもしれません。Specは@JohnnyCoderから引用したように言っています：

media.pause（）

paused属性をtrueに設定し、必要に応じてメディアリソースをロードします。

->ロードする

if (videoEl.readyState !== 4) {
    videoEl.load();
}
videoEl.play();

メディアの準備状態を示しますHAVE_ENOUGH_DATA = 4

基本的に、ビデオがまだロードされていない場合のみロードします。ビデオがロードされなかったため、言及されたエラーが発生しました。タイムアウトを使用するよりも良いかもしれません。

すべてのエラーを削除しました：（typescript）

audio.addEventListener('canplay', () => {
    audio.play();
    audio.pause();
    audio.removeEventListener('canplay');
}); 

ライブストリーミングでも同じ問題に直面していました。そして私の修正はこれです。HTMLビデオTAGから「自動再生」を削除し 、以下のコードを使用して再生してください。

if (Hls.isSupported()) {
            var video = document.getElementById('pgVideo');
            var hls = new Hls();
            hls.detachMedia();
            hls.loadSource('http://wpc.1445X.deltacdn.net/801885C/lft/apple/TSONY.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
            hls.on(Hls.Events.ERROR, function (event, data) {
                if (data.fatal) {
                    switch (data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            // when try to recover network error
                            console.log("fatal network error encountered, try to recover");
                            hls.startLoad();
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            console.log("fatal media error encountered, try to recover");
                            hls.recoverMediaError();
                            break;
                        default:
                            // when cannot recover
                            hls.destroy();
                            break;
                    }
                }
            });
        }

ChromeはPromiseを最新バージョンで返します。そうでなければ、単に：

        n.pause();
        n.currentTime = 0;
        setTimeout(function() {n.play()}, 0);

私は同じ問題を抱えていますが、最後に私は次の方法で解決します：

video.src = 'xxxxx';
video.load();
setTimeout(function() {
  video.play();
}, 0);

このコードは修正されました！

@JohnnyCoderの変更されたコード

HTML：

 <video id="captureVideoId" muted width="1280" height="768"></video>
                <video controls id="recordedVideoId" muted width="1280" 
 style="display:none;" height="768"></video>

JS：

  var recordedVideo = document.querySelector('video#recordedVideoId');
  var superBuffer = new Blob(recordedBlobs, { type: 'video/webm' });
  recordedVideo.src = window.URL.createObjectURL(superBuffer);
  // workaround for non-seekable video taken from
  // https://bugs.chromium.org/p/chromium/issues/detail?id=642012#c23
  recordedVideo.addEventListener('loadedmetadata', function () {
    if (recordedVideo.duration === Infinity) {
        recordedVideo.currentTime = 1e101;
        recordedVideo.ontimeupdate = function () {
            recordedVideo.currentTime = 0;
            recordedVideo.ontimeupdate = function () {
                delete recordedVideo.ontimeupdate;
                var isPlaying = recordedVideo.currentTime > 0 && 
     !recordedVideo.paused && !recordedVideo.ended && 
      recordedVideo.readyState > 2;
                if (isPlaying) {
                    recordedVideo.play();
                }
            };
        };
       }
      });

以下のコードで修正しました：

遊びたいときは、以下を使用します。

var video_play = $('#video-play');
video_play.on('canplay', function() {
 video_play.trigger('play');
});

同様に、一時停止したい場合：

var video_play = $('#video-play');
video_play.trigger('pause');

video_play.on('canplay', function() {
  video_play.trigger('pause');
});

動画のダウンロードが非常に遅く、動画がバッファされていないことが理由である場合の別の解決策は次のとおりです。

if (videoElement.state.paused) { videoElement.play(); } else if (!isNaN(videoElement.state.duration)) { videoElement.pause(); }

多くのプログラマーがこの問題に遭遇したようです。ソリューションは非常にシンプルでなければなりません。メディア要素Promiseはアクションから戻るので

n.pause().then(function(){
    n.currentTime = 0;
    n.play();
})

トリックを行う必要があります

これはグーグルブログからの解決策です：

var video = document.getElementById('#video')
var promise = video.play()
//chrome version 53+
if(promise){
    promise.then(_=>{
        video.pause()
    })
}else{
    video.addEventListener('canplaythrough', _=>{
        video.pause()
    }, false)
}

すべての新しいブラウザーサポートビデオはミュートされた状態でのみ自動再生されるので、次のように入力してください

<video autoplay muted="muted" loop id="myVideo">
  <source src="https://w.r.glob.net/Coastline-3581.mp4" type="video/mp4">
</video>

サイトがhttpsで実行されている場合、動画のURLはSSLステータスと一致する必要があり、動画のURLもhttpsにあり、HTTPでも同じである必要があります

きれいなと最も簡単な解決策：

var p = video.play();
if (p !== undefined) p.catch(function(){});

理由1-プレイの約束が解決するのを待たずにポーズを呼び出す

このシナリオでは回答が多すぎるため、その問題に最適なドキュメントを参照します。

https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

理由2-タブがフォーカスされていないときにplayを呼び出す

この場合、ブラウザは中断可能性がありplay呼び出すことにより、pauseタブがフォーカスされていないときにがあります。アクティブなタブのリソースを節約するため。

したがって、playを呼び出す前に、タブがフォーカスされるのを待つだけです。

async function waitForTabFocus() {
  return new Promise((resolve, reject) => {
    const onFocus = () => { resolve(); window.removeEventListener('focus', onFocus) };
    window.addEventListener('focus', onFocus)
  })
}

if (!document.hasFocus()) await this.waitForTabFocus();
videoEl.play();

私は同じ問題に遭遇し、autoplayを使用するのではなく属性を動的に追加することで解決しましたplay()。このようにして、ブラウザーは競合状態に陥ることなく再生することがわかりました。

自動再生ビデオがplay()終了したときに呼び出してループするようにしようとすると、タイムアウトの回避策が機能しませんでした（ただし、タイムアウトは長くなります）。

しかし、ビデオが終了したときにjQueryでビデオを複製/置き換えることにより、適切にループすることを発見しました。

例えば：

<div class="container">
  <video autoplay>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

そして

$(document).ready(function(){
  function bindReplay($video) {
    $video.on('ended', function(e){
      $video.remove();
      $video = $video.clone();
      bindReplay($video);
      $('.container').append($video);
    });
  }
  var $video = $('.container video');
  bindReplay($video);
});

Chrome 54.0.2840.59（64ビット）/ OS X 10.11.6を使用しています

彼らはhtml5ビデオを更新し、いくつかのコーデックを廃止したと思います。コーデックを削除した後、それは私のために働いた。

以下の例では：

<video>
    <source src="sample-clip.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
    <source src="sample-clip.webm" type="video/webm; codecs='vp8, vorbis'"> 
</video>

    must be changed to

<video>
    <source src="sample-clip.mp4" type="video/mp4">
    <source src="sample-clip.webm" type="video/webm">
</video>

Uncaught (in promise)Thisのエラーが表示された場合、これは単に、Promiseを処理する必要があることを意味します。.catch()この場合、.play()Promiseを返します。メッセージをログに記録するか、コードを実行するか、何もしないかを決定できますが.catch()、エラーが発生している限り、エラーは発生しません。

var n = new Audio();
n.pause();
n.currentTime = 0;
n.play().catch(function(e) {
  // console.log('There was an error', e);
});

私はこの問題に対処するためにトリックを使いました。グローバル変数var audioを定義します。

そして機能チェックで

if(audio === undefined)
{
   audio = new Audio(url);
}

そして停止機能で

audio.pause();
audio = undefined;

の次の呼び出しではaudio.play、オーディオは '0' currentTimeから準備されます

使った

audio.pause();
audio.currentTime =0.0; 

しかし、それはうまくいきませんでした。ありがとう。