在Javascript/jQuery中播放完声音后刷新页面

难倒了，我想在单击按钮清除localstorage数据时播放纸张皱折声音，但必须在清除localstorage数据后刷新页面以更新更改，并且刷新不允许播放声音效果。所以我希望它等到音效结束，然后触发刷新。谢谢

我的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>

清晰的音符
注释标题
书写日期
你好！点击便笺卡并开始编辑！




尝试刷新页面，注意您的内容保持不变。


尝试关闭浏览器，关闭计算机，然后再次打开。

它还在！这一切都要归功于html5本地存储api。




请注意，数据不会在不同的浏览器、计算机或任何其他设备（如手机）之间同步。




这张便条是有响应的！尝试调整窗口大小，看看宽度如何调整。


还请注意，当您到达移动宽度时，便笺会进行调整，以最佳利用有限的空间。




提示：您可以按ctrl+b键输入粗体文本。类似地，除了下划线或斜体文本，您也可以执行相同的操作

还有我的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>

$（函数（）{
var title=document.getElementById（'title'）；
$（标题）.blur（函数（）{
localStorage.setItem（'title'，this.innerHTML）；
});
//当页面加载时
if（localStorage.getItem（'title'））{
title.innerHTML=localStorage.getItem（'title'）；
}
//重置
//localStorage.clear（）；
});
$（函数（）{
var date=document.getElementById（'date'）；
$（日期）.blur（函数（）{
localStorage.setItem（'date'，this.innerHTML）；
});
//当页面加载时
if（localStorage.getItem（'date'））{
date.innerHTML=localStorage.getItem（'date'）；
}
//重置
//localStorage.clear（）；
});
$（函数（）{
var note=document.getElementById（'note'）；
$（注意）.blur（函数（）{
setItem（'note'，this.innerHTML）；
});
//当页面加载时
if（localStorage.getItem（'note'））{
note.innerHTML=localStorage.getItem（'note'）；
}
//重置
//localStorage.clear（）；
});
window.onload=函数（）{
var clear=document.getElementById（“clear”）；
var myaudio=新音频（“paper_crumple.mp3”）；
clear.onclick=函数（）{
myaudio.play（）
localStorage.clear（）
//window.location.reload（）
}
}

尝试使用结束事件

---

这基本上是说：“播放完声音-重新加载页面后”

对于任何想要解决这个问题的人，我终于让它工作了，所以我想我会与社区分享我的解决方案

只是给了链接一个ID，并使href的内容等于：javascript:void（0）

---

希望这对任何人都有帮助

感谢您的快速响应，但它似乎仍然不起作用。这肯定是一个问题。一结束的部分，音乐将发挥良好，否则。有趣的一点是，如果我把onended作为一个值放在audio标签中，它会工作，但当使用按钮调用音频时，它似乎不工作。再次感谢。

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

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

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");
};

};