时间戳

首页 > 解决方案 > 音频端播放新文件

javascript - 音频端播放新文件

问题描述

我有一个web 应用程序，当您单击使用 ajax/jquery 的链接时，它会加载和播放音轨。一切正常，但是当轨道结束时，轨道设置为循环，这可以永远持续下去。我希望播放器从数据库中自动加载随机曲目并在曲目结束时播放。音频就是这样设置的。

<div id="player"><audio title="Audio title" controls loop autoplay controlsList="nodownload" preload="auto" id="myAudio" /><source src="audio.mp3" type="audio/mp3" id="audioID"></div>

当您单击它时，我正在使用 jquery 将新曲目加载到#player div 中。例如;

<a href="javascript:;" onClick="loadurl('player.php?play=audioID','player')">Track One</a>

<script type="text/javascript">

<!-- ajaxified -->
function loadurl(dest, targetID) {
    
var XMLHttpRequestObject = false; 
    if (window.XMLHttpRequest) { 
            XMLHttpRequestObject = new XMLHttpRequest(); 
        } else if (window.ActiveXObject) { 
            XMLHttpRequestObject = new 
            ActiveXObject("Microsoft.XMLHttp"); 
    } 

if(XMLHttpRequestObject) { 
            XMLHttpRequestObject.open("GET", dest); 
            XMLHttpRequestObject.onreadystatechange = function() { 
            
        if (XMLHttpRequestObject.readyState == 4 && 
            XMLHttpRequestObject.status == 200) { 
            document.getElementById(targetID).innerHTML = 
            XMLHttpRequestObject.responseText; 
            delete XMLHttpRequestObject; 
            XMLHttpRequestObject = null; 
            } 
        } 
        XMLHttpRequestObject.send(null); 
    } 
} 

</script>

在我的 player.php 文件中，我有；

<?php  
.... fetch track from db where id = $_GET['play']; ......
?>

<audio title="Audio Title" controls loop autoplay controlsList="nodownload" preload="auto" id="myAudio" /> 
<source src="audio2.mp3" type="audio/mp3" id="audioID">

我从这里和网上尝试了几个建议，比如添加；

<script type="text/javascript">

const audio = document.querySelector('myAudio');

audio.onended = (event) => {
  console.log('Video stopped either because 1) it was over, ' +
      'or 2) no further data is available.');
};

</script>

和这个...

<script type="text/javascript">
const audio = document.querySelector('myAudio');

audio.addEventListener('ended', (event) => {
  console.log('Video stopped either because 1) it was over, ' +
      'or 2) no further data is available.');
});

</script>

和这个...

<script type="text/javascript">
myAudio.addEventListener("ended", function(){
     myAudio.currentTime = 0;
     console.log("ended");
     alert("ended");
});

</script>

但它们都不起作用。我究竟做错了什么？

更新

感谢@Roko C. Buljan 的贡献，我能够使用以下脚本将新曲目加载到 div#player 中。当曲目结束时，使用 ajax 函数 loadurl 模拟点击，并将新曲目加载到#player。这会加载一个新轨道，但是当该轨道结束时，它不会加载另一个轨道。我该如何解决？

<a href="javascript:;" id="randomplay" onClick="loadurl('player.php?random=1','player')"></a>
<script type="text/javascript">

const audio = document.querySelector('#myAudio');

audio.addEventListener("ended", () => {

        $("#randomplay").click();

    }); 

</script>

标签： javascriptphpjqueryhtml5-audio

解决方案

Tl;博士：使用：audio.addEventListener("ended", playNextFn);

有两种可能：

1.如果客户端没有完整的曲目列表：

在您的服务器上创建一个可以响应随机轨道的路由，并通过 AJAX 将其以 JSON 格式发送回客户端，例如{"src": "bazzz.mp3", "name": "", "group": "", "year": "", "cover": ""}.

const audio = new Audio(); // or: document.querySelector('#myAudio');

const playRandomFile = () => {
  fetch("/api/getRandomSong.php").then(res => res.json).then(data => {
    audio.src = data.src;
    audio.play();
  });
};

audio.addEventListener("ended", playRandomFile); // ♫♪♫...♪♫♪♫♪...♫♪!

希望您知道如何编写从数据库songs表中获取随机条目并将其作为 JSON 返回的 PHP 代码。

2. 如果客户预先知道所有曲目：

使用 JS 切换到"ended"Event 上的随机轨道。

const songs = [
  {src: "xyz.mp3", name: "", group: "", year:"", cover: ""},
  {src: "foo.mp3", name: "", group: "", year:"", cover: ""},
  {src: "bar.mp3", name: "", group: "", year:"", cover: ""},
];

const audio = new Audio(); // or: document.querySelector('#myAudio');

const playRandomFile = () => {
  audio.src = songs[~~(Math.random() * songs.length)].src;
  audio.play();
};

audio.addEventListener("ended", playRandomFile); // ♫♪♫...♪♫♪♫♪...♫♪!

每日提示：您可以直接从songs数组中生成 JS 中的 HTML。

完整示例

带有维基媒体音频文件和 HTML<audio>元素：

const songs = [
  {src: "https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg", name: "", group: "", year:"", cover: ""},
  {src: "https://upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg", name: "", group: "", year:"", cover: ""},
  {src: "https://upload.wikimedia.org/wikipedia/en/5/5e/U2_One.ogg", name: "", group: "", year:"", cover: ""},
];

const audio = document.querySelector('#myAudio');
const getRandomSong = () => songs[~~(Math.random() * songs.length)];

audio.addEventListener("ended", () => {
  audio.src = getRandomSong().src
  audio.play()
}); 

audio.src = getRandomSong().src // on DOM ready
<audio id="myAudio" controls></audio>

推荐阅读