3

困ったことに、ボタンをクリックしてローカルストレージデータをクリアしたときに紙のしわくちゃのサウンドを再生したいのですが、ローカルストレージデータをクリアして変更を更新した後にページを更新する必要があり、更新によって効果音が再生されません。そのため、効果音が終了するまで待ってから、更新をトリガーする必要があります。ありがとう！

私のHTML：

<audio controls="controls">
    <source src="paper_crumple.mp3" type="audio/mpeg" />
</audio>

<section class="note">

    <h3 id="clear">Clear Note</h3>
    <h1 id="title" contenteditable="true">Note Title</h1>
    <h2 id="date" contenteditable="true">Date Written</h2>
    <p id="note" contenteditable="true">Hello! Click on the note card and start editing!
        <br>
        <br>
        Try refreshing the page, notice that your content stays.
        <br>
        Try closing your browser, shutting your computer off, and then opening it up again.
        <br>It still stays! This is all thanks to the html5 localstorage api.
        <br>
        <br>
        Note that the data will not sync between different browsers, computers, or any other devices such as your mobile phone.
        <br>
        <br>
        This note is responsive! Try adjusting your window size and see how the width adjusts.
        <br>
        Also note that when you get to mobile width, the note adjusts to best take use of the limited space.
        <br>
        <br>
        Tips: You can press ctrl+b for <b>bold</b> text. Similarly you can do the same thing but for <u>underlined</u> or <i>italic text</i>.</p>

</section>

そして私のJavaScript：

    <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {

      var title = document.getElementById('title');

      $(title).blur(function() {
        localStorage.setItem('title', this.innerHTML);
      });

      // when the page loads
      if ( localStorage.getItem('title') ) {
        title.innerHTML = localStorage.getItem('title'); 
      }

      // to reset
      // localStorage.clear();

    });

    $(function() {

      var date = document.getElementById('date');

      $(date).blur(function() {
        localStorage.setItem('date', this.innerHTML);
      });

      // when the page loads
      if ( localStorage.getItem('date') ) {
        date.innerHTML = localStorage.getItem('date'); 
      }

      // to reset
      // localStorage.clear();

    });

    $(function() {

      var note = document.getElementById('note');

      $(note).blur(function() {
        localStorage.setItem('note', this.innerHTML);
      });

      // when the page loads
      if ( localStorage.getItem('note') ) {
        note.innerHTML = localStorage.getItem('note'); 
      }

      // to reset
      // localStorage.clear();

    });

    window.onload = function() {
        var clear = document.getElementById("clear");
        var myaudio = new Audio('paper_crumple.mp3');
        clear.onclick = function() {
            myaudio.play()
            localStorage.clear()    
            // window.location.reload()
        }
    }
</script>
4

2 に答える 2

1

終了したイベントを使用してみてくださいhttp://dev.w3.org/html5/spec/single-page.html#event-media-ended

clear.onclick = function() {
    myaudio.play()
    localStorage.clear()    
    myaudio.onended = function () {
        window.location.reload()
    }
}

これは基本的に-「サウンドの再生が終了した後-ページをリロードする」と言っています

于 2012-12-03T06:55:57.537 に答える
0

この問題への答えを求めている人のために、私はついにそれを機能させることができたので、私は自分の解決策をコミュニティと共有すると思いました。

リンクにIDを付けて、hrefのコンテンツを次のようにしました。javascript：void（0）;

<a href="javascript:void(0);" id="clear">Clear Note</a>

次に、これをファイルscript.jsファイルに入れます。

window.onload = function() {

var clear = document.getElementById("clear");
var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'paper_crumple.mp3');
    audioElement.setAttribute('preload', 'auto');
    audioElement.setAttribute('onended', 'window.location.reload()');

function playAudio() {
    audioElement.load;
    audioElement.play();
};

clear.onclick = function() {
    localStorage.clear();
    playAudio();
    $("#wrapper").addClass("fadeOutDown");
};

};

これが誰かに役立つことを願っています！

于 2013-03-04T00:04:27.473 に答える