如何停止甜食中的音频？

Question

使用此代码，按钮显示警报并开始播放歌曲，但是单击取消按钮时声音如何停止？

 document.querySelector(".first").addEventListener("click", function() { swal({ title: "Show Two Buttons Inside the Alert", showCancelButton: true, confirmButtonText: "Confirm", confirmButtonColor: "#00ff99", cancelButtonColor: "#ff0099" }); });

 <a id="footer-buttons" class="btn btn-warning btn-sm first" onclick="playAudio()"><span class="fa fa-music"></span> MUSICA</a>

Answer 1

SweetAlert使用 Promises来检查用户如何与警报交互。 如果通过取消单击消除警报，则 Promise 将使用null作为参数值来解决。 我下面的示例显示了如何根据用户的选择来控制音频。

 let aud = document.getElementById("myAudio"); function swalFnc() { aud.play(); swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file,": buttons: { cancel: { visible, true: text, 'No, cancel plx:' }: confirm, { visible: true, text, 'Yes: delete it.'. className; 'swal-warning' } } });then(function(isConfirmed) { if (isConfirmed === null) { aud.pause(); } }); }

 .swal-warning { background-color: #DD6B55; color: white; }

 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <input type="button" value="Click me" onclick="swalFnc()"> <audio id="myAudio"> <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_OOG_5MG.ogg" type="audio/ogg"> <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mp3"> </audio>

Answer 2

这是通过放置播放/停止按钮的另一种非常优雅的方式。

在这里查看它在此页面上的工作原理...但是您必须单击“MUSICA”橙色按钮： https://www.clubesorte.org/temas/1.tema-teste/

 <script> /* Alert - patrocinio da musica */ document.querySelector(".third").addEventListener("click", function() { swal({ title: "Willie Nelson", html: 'Música patrocinada por ' + '<a target="_blank" href="http://willienelson.com/">Willie Nelson</a> ' + '<a class="btn btn-success btn-xs" style="font-family:inherit;font-size:13px;color:#fff;border:none;" onClick="play()">Play/Pause</a> ', imageUrl: "https://texashillcountry.com/wp-content/uploads/stage-660x400.jpg", imageWidth: 550, imageHeight: 225, imageAlt: "Eagle Image", showCancelButton: false, confirmButtonText: "Fechar", cancelButtonText: "Stop", confirmButtonColor: "#428bca", cancelButtonColor: "#428bca", reverseButtons: true, }); }); </script> <script> function play() { var audio = document.getElementById('audio'); if (audio.paused) { audio.play(); }else{ audio.pause(); audio.currentTime = 0 } } </script>

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script> <button id="footer-buttons" class="btn btn-warning btn-sm third"><span class="fa fa-music"></span> MUSICA</button> <audio id="audio" controls tabindex="0" loop> <source type="audio/mp3" src="./img/willie-nelson-on-the-road-again.mp3"> Sorry, your browser does not support HTML5 audio. </audio>