具有动态源的 HTML5 音频元素

HTML5 audio element with dynamic source(具有动态源的 HTML5 音频元素)
本文介绍了具有动态源的 HTML5 音频元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我有一个基本的音频播放器:

I have a basic audio player:

<audio controls="controls" autoplay="true" loop="loop">
<source src="song.php" type="audio/mpeg" />
</audio>

而不是直接指向 MP3 文件的源代码,我让它指向一个 PHP 文件,然后该文件指向 MP3 文件,该文件有效.但是,当当前曲目结束时,PHP 文件将指向一个新的 MP3 文件.所以,我遇到的问题是,当播放器使用新的 MP3 文件循环播放时,它完全停止工作.有没有办法解决?有没有办法通过播放列表或任何其他播放器来做到这一点?

And instead of the source pointing directly to the MP3 file I have it pointed at a PHP file which then points to the MP3 file, which works. But, when the current track is over the PHP file is pointing to a new MP3 file. So, the problem that I have is that when the player goes to loop, with the new MP3 file, it completely stops working. Is there any way around this? Is there a way to do this with a playlist or any other players?

推荐答案

复制自您的重复问题:

对于初学者来说,每次单击元素时都会附加一个新的事件处理程序.如果有人经常暂停音乐,他们就会遇到问题.

For starters, you are attaching a new event handler every single time the element is clicked. If someone frequently pauses the music, they will run into problems.

相反,试试这个:

<audio id="audio" autoplay controls src="song.php" type="audio/mpeg"></audio>
<script type="text/javascript">
    document.getElementById('audio').addEventListener("ended",function() {
        this.src = "song.php?nocache="+new Date().getTime();
        this.play();
    });
</script>

我假设 song.php 是一个返回音频数据的 PHP 文件.nocache 查询参数将确保每次实际调用该文件.

I'm assuming that song.php is a PHP file that returns the audio data. The nocache query parameter will ensure that the file is actually called every time.

这篇关于具有动态源的 HTML5 音频元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

DeepL的翻译效果还是很强大的,如果我们要用php实现DeepL翻译调用,该怎么办呢?以下是代码示例,希望能够帮到需要的朋友。 在这里需要注意,这个DeepL的账户和api申请比较难,不支持中国大陆申请,需要拥有香港或者海外信用卡才行,没账号的话,目前某宝可以
PHP通过phpspreadsheet导入Excel日期,导入系统后,全部变为了4开头的几位数字,这是为什么呢?原因很简单,将Excel的时间设置问文本,我们就能看到该日期本来的数值,上图对应的数值为: 要怎么解决呢?进行数据转换就行,这里可以封装方法,或者用第三方的
mediatemple - can#39;t send email using codeigniter(mediatemple - 无法使用 codeigniter 发送电子邮件)
Laravel Gmail Configuration Error(Laravel Gmail 配置错误)
Problem with using PHPMailer for SMTP(将 PHPMailer 用于 SMTP 的问题)
Issue on how to setup SMTP using PHPMailer in GoDaddy server(关于如何在 GoDaddy 服务器中使用 PHPMailer 设置 SMTP 的问题)