从数据库中连续传输随机音频

2023-11-29

我正在计划一个非常简单的音频流媒体项目,它将获取本地服务器上托管的 mysql 数据库歌曲列表,然后全天不断地从列表中随机播放一首歌曲。这将附加到一个非常简单的前端页面,该页面将显示当前播放歌曲的名称。

我知道如何从数据库获取随机文件并使用 Javascript/HTML 前端对其进行流式传输,但我不知道如何检测歌曲何时结束 - 然后加载下一首歌曲。有没有一种简单的方法可以做到这一点?有人能指出我正确的方向吗?

EDIT:为了详细说明前端,我很可能会通过 PHP 将文件名/位置提供到 HTML5 音频标签中(我再次希望这尽可能简单)。我认为最简单的方法是播放音频文件,然后刷新页面并使用相同的音频标签和新文件名播放下一个文件 - 我只是不知道如何导致该事件在结束时发生这首歌。或者,如果需要的话,我可以使用基于 Javascript 的播放器,例如 JPlayer (http://www.jplayer.org/)。

我猜有某种回调函数可以与 JQuery 结合使用?


HTML5 音频标签有一个事件“onending”,当媒体到达末尾时运行,但由于您希望继续播放,因此应该使用“onwaiting”事件,该事件也会在媒体到达末尾时触发,但保持自身准备好接受新的轨道/数据。

然后,您可以使用 XMLHttpRequest 对象来查询下一个要播放的曲目,例如。

<script type="text/javascript">
  function getNextTrack(e) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "next_track.php", false);
    xhttp.send("");

    var playback = xhttp.responseXML.childNodes[0];
    for(i = 0; i < playback.childNodes.length; ++i) {
      if (playback.childNodes[i].nodeName != 'track') continue;
      var value = playback.childNodes[i].childNodes[0].nodeValue;
      e.currentTarget.src = value;
      break;
    }
  }
</script>
<audio id="player" onwaiting="javascript: getNextTrack(e)" src="first_track.ogg"></audio>

xml 的形式如下:

<?xml version="1.0" encoding="UTF-8" ?> 
<playback> 
    <track>next_song.ogg</track>
</playback>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从数据库中连续传输随机音频 的相关文章

  • 使用 PHP glob 列出 FTP 服务器上的文件不起作用

    我使用此代码来访问目录 location files pictures glob location png 我想使用 FTP 访问远程路径 location opendir ftp user password host name files
  • Bugzilla 中分离客户端的基本权限

    我正在尝试配置一个 Bugzilla 实例 这将允许我的客户登录并为其正在开发 维护的网站提交错误 例如 我创建了 2 个名为 TestProject TestProject2 的产品和一个名为 TestClient 的用户 我想要实现的是
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 节点大小与 D3 中的子节点数量成正比

    我创建了这个点击 展开 折叠网络 http jsfiddle net 5Lv8gkqv http jsfiddle net 5Lv8gkqv var width 960 height 500 root name Chocolate tag
  • Django:按钮链接

    我是一名 Django 新手用户 尝试创建一个按钮 单击该按钮会链接到我网站中的另一个页面 我尝试了一些不同的例子 但似乎没有一个对我有用 举个例子 为什么这不起作用
  • 暂停除了已激活的玩家之外的所有其他玩家。

    我有这个插件 它可以将不同的样式应用于 html5
  • 在 foreach 中使用 QueryPath 的多个查找

    我正在使用 QueryPath 和 PHP 这发现 eventdate 没问题 但不会为 dtstart 返回任何内容 qp htmlqp url foreach qp gt find table schedule gt find tr a
  • 使用 XPATH(和 PHP)从样式属性中选择背景 url

    我只想从此背景图像样式属性中选择 url 这可以通过 XPATH 实现吗 a href http www test com style background image none test a 我有类似的东西 url xpath gt qu
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log
  • Facebook API sdk 4.0 - 将照片发布到 Facebook

    我正在尝试创建一个应用程序 用户可以在其中浏览照片并将其从计算机提交到 Facebook 为此 他们首先必须将照片上传到服务器 然后使用 Facebook 请求将此图像发布到 Facebook 我正在使用多部分 表单数据 这就是我到目前为止
  • 在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

    我正在尝试将新的 Google 协作平台用于我开发的网页 但是 我在存储本地数据时遇到了问题 本地文件在 Windows 和 Apple safari chrome 中运行良好 从 Google 协作平台尝试一下 没有什么乐趣 此外 在 s
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • INSERT..RETURNING 在 JOOQ 中不起作用

    我有一个 MariaDB 数据库 我正在尝试在表中插入一行users 它有一个生成的id我想在插入后得到它 我见过this http www jooq org doc 3 8 manual sql building sql statemen
  • 使用 PHP 从 Mongo 解码 JSON

    我已经看过这个线程 PHP 解码嵌套 JSON https stackoverflow com questions 3555335 php decode nested json并没有设法用它来解决我的问题 我目前正在从 Mongo 获取 J
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 带倒计时的php循环

    假设我从 400 开始计数器 我将如何执行一个向后运行直到 0 的 foreach 循环 伪代码 i 400 foreach SOMETHING do stuff i for i 400 i gt 0 i do stuff 其他方法 i 4

随机推荐