如何添加HTML 5音频播放器？
[英]How to add HTML 5 audio player?
问题描述
I'm getting source file from a folder. 
我从文件夹中获取源文件。 When I select a ready-made mp3 file like song as src in audio tag, It works. 当我在音频标签中选择像歌曲src这样的现成mp3文件时，它可以工作。 But when I select a mp3 file(call recording file) created from base64 encoded string, I doesn't work. 但是当我选择从base64编码的字符串创建的mp3文件（调用记录文件）时，我无法正常工作。 File is perfectly created as I checked in folder and played. 当我在文件夹中检查并播放时，文件完美创建。 Problem is that when I move curser on player, it becomes transparent just like an image. 问题是，当我在播放器上移动光标时，它就像图像一样变得透明。 If anyone know answer then please explain with an example. 如果有人知道答案，那么请举例说明。 Thank You. 谢谢。 Here is my code. 这是我的代码。
<?php
$data = $_REQUEST['data'];
$filename = $_REQUEST['filename'] . ".3gpp";
$imei = $_REQUEST['imei'];
$dir = __DIR__ . "/recordings/";
$file = file_put_contents($dir . $filename, base64_decode($data));
$rloc = "recordings/" . $filename;
$str = "INSERT INTO recording(data, filename, imei) VALUES('$rloc', '$filename', '$imei')";
$qry = mysql_query($str);
?>
<html>
<audio controls autoplay="">
<source src="<?php echo $row['data']; ?>">
</audio>
</html>
5 个解决方案
解决方案1
0 2015-06-02 09:19:06
<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay">
<source src="data:audio/wav;base64,UklGRhwMAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AAABAAgAZGF0Ya4LAACAgICAgICAgICAgICAgICAgICAgICAgICAf3hxeH+AfXZ1eHx6dnR5fYGFgoOKi42aloubq6GOjI2Op7ythXJ0eYF5aV1AOFFib32HmZSHhpCalIiYi4SRkZaLfnhxaWptb21qaWBea2BRYmZTVmFgWFNXVVVhaGdbYGhZbXh1gXZ1goeIlot1k6yxtKaOkaWhq7KonKCZoaCjoKWuqqmurK6ztrO7tbTAvru/vb68vbW6vLGqsLOfm5yal5KKhoyBeHt2dXBnbmljVlJWUEBBPDw9Mi4zKRwhIBYaGRQcHBURGB0XFxwhGxocJSstMjg6PTc6PUxVV1lWV2JqaXN0coCHhIyPjpOenqWppK6xu72yxMu9us7Pw83Wy9nY29ve6OPr6uvs6ezu6ejk6erm3uPj3dbT1sjBzdDFuMHAt7m1r7W6qaCupJOTkpWPgHqAd3JrbGlnY1peX1hTUk9PTFRKR0RFQkRBRUVEQkdBPjs9Pzo6NT04Njs+PTxAPzo/Ojk6PEA5PUJAQD04PkRCREZLUk1KT1BRUVdXU1VRV1tZV1xgXltcXF9hXl9eY2VmZmlna3J0b3F3eHyBfX+JgIWJiouTlZCTmpybnqSgnqyrqrO3srK2uL2/u7jAwMLFxsfEv8XLzcrIy83JzcrP0s3M0dTP0drY1dPR1dzc19za19XX2dnU1NjU0dXPzdHQy8rMysfGxMLBvLu3ta+sraeioJ2YlI+MioeFfX55cnJsaWVjXVlbVE5RTktHRUVAPDw3NC8uLyknKSIiJiUdHiEeGx4eHRwZHB8cHiAfHh8eHSEhISMoJyMnKisrLCszNy8yOTg9QEJFRUVITVFOTlJVWltaXmNfX2ZqZ21xb3R3eHqAhoeJkZKTlZmhpJ6kqKeur6yxtLW1trW4t6+us7axrbK2tLa6ury7u7u9u7vCwb+/vr7Ev7y9v8G8vby6vru4uLq+tri8ubi5t7W4uLW5uLKxs7G0tLGwt7Wvs7avr7O0tLW4trS4uLO1trW1trm1tLm0r7Kyr66wramsqaKlp52bmpeWl5KQkImEhIB8fXh3eHJrbW5mYGNcWFhUUE1LRENDQUI9ODcxLy8vMCsqLCgoKCgpKScoKCYoKygpKyssLi0sLi0uMDIwMTIuLzQ0Njg4Njc8ODlBQ0A/RUdGSU5RUVFUV1pdXWFjZGdpbG1vcXJ2eXh6fICAgIWIio2OkJGSlJWanJqbnZ2cn6Kkp6enq62srbCysrO1uLy4uL+/vL7CwMHAvb/Cvbq9vLm5uba2t7Sysq+urqyqqaalpqShoJ+enZuamZqXlZWTkpGSkpCNjpCMioqLioiHhoeGhYSGg4GDhoKDg4GBg4GBgoGBgoOChISChISChIWDg4WEgoSEgYODgYGCgYGAgICAgX99f398fX18e3p6e3t7enp7fHx4e3x6e3x7fHx9fX59fn1+fX19fH19fnx9fn19fX18fHx7fHx6fH18fXx8fHx7fH1+fXx+f319fn19fn1+gH9+f4B/fn+AgICAgH+AgICAgIGAgICAgH9+f4B+f35+fn58e3t8e3p5eXh4d3Z1dHRzcXBvb21sbmxqaWhlZmVjYmFfX2BfXV1cXFxaWVlaWVlYV1hYV1hYWVhZWFlaWllbXFpbXV5fX15fYWJhYmNiYWJhYWJjZGVmZ2hqbG1ub3Fxc3V3dnd6e3t8e3x+f3+AgICAgoGBgoKDhISFh4aHiYqKi4uMjYyOj4+QkZKUlZWXmJmbm52enqCioqSlpqeoqaqrrK2ur7CxsrGys7O0tbW2tba3t7i3uLe4t7a3t7i3tre2tba1tLSzsrKysbCvrq2sq6qop6alo6OioJ+dnJqZmJeWlJKSkI+OjoyLioiIh4WEg4GBgH9+fXt6eXh3d3V0c3JxcG9ubWxsamppaWhnZmVlZGRjYmNiYWBhYGBfYF9fXl5fXl1dXVxdXF1dXF1cXF1cXF1dXV5dXV5fXl9eX19gYGFgYWJhYmFiY2NiY2RjZGNkZWRlZGVmZmVmZmVmZ2dmZ2hnaGhnaGloZ2hpaWhpamlqaWpqa2pra2xtbGxtbm1ubm5vcG9wcXBxcnFycnN0c3N0dXV2d3d4eHh5ent6e3x9fn5/f4CAgIGCg4SEhYaGh4iIiYqLi4uMjY2Oj5CQkZGSk5OUlJWWlpeYl5iZmZqbm5ybnJ2cnZ6en56fn6ChoKChoqGio6KjpKOko6SjpKWkpaSkpKSlpKWkpaSlpKSlpKOkpKOko6KioaKhoaCfoJ+enp2dnJybmpmZmJeXlpWUk5STkZGQj4+OjYyLioqJh4eGhYSEgoKBgIB/fn59fHt7enl5eHd3dnZ1dHRzc3JycXBxcG9vbm5tbWxrbGxraWppaWhpaGdnZ2dmZ2ZlZmVmZWRlZGVkY2RjZGNkZGRkZGRkZGRkZGRjZGRkY2RjZGNkZWRlZGVmZWZmZ2ZnZ2doaWhpaWpra2xsbW5tbm9ub29wcXFycnNzdHV1dXZ2d3d4eXl6enp7fHx9fX5+f4CAgIGAgYGCgoOEhISFhoWGhoeIh4iJiImKiYqLiouLjI2MjI2OjY6Pj46PkI+QkZCRkJGQkZGSkZKRkpGSkZGRkZKRkpKRkpGSkZKRkpGSkZKRkpGSkZCRkZCRkI+Qj5CPkI+Pjo+OjY6Njo2MjYyLjIuMi4qLioqJiomJiImIh4iHh4aHhoaFhoWFhIWEg4SDg4KDgoKBgoGAgYCBgICAgICAf4CAf39+f35/fn1+fX59fHx9fH18e3x7fHt6e3p7ent6e3p5enl6enl6eXp5eXl4eXh5eHl4eXh5eHl4eXh5eHh3eHh4d3h4d3h3d3h4d3l4eHd4d3h3eHd4d3h3eHh4eXh5eHl4eHl4eXh5enl6eXp5enl6eXp5ent6ent6e3x7fHx9fH18fX19fn1+fX5/fn9+f4B/gH+Af4CAgICAgIGAgYCBgoGCgYKCgoKDgoOEg4OEg4SFhIWEhYSFhoWGhYaHhoeHhoeGh4iHiIiHiImIiImKiYqJiYqJiouKi4qLiouKi4qLiouKi4qLiouKi4qLi4qLiouKi4qLiomJiomIiYiJiImIh4iIh4iHhoeGhYWGhYaFhIWEg4OEg4KDgoOCgYKBgIGAgICAgH+Af39+f359fn18fX19fHx8e3t6e3p7enl6eXp5enl6enl5eXh5eHh5eHl4eXh5eHl4eHd5eHd3eHl4d3h3eHd4d3h3eHh4d3h4d3h3d3h5eHl4eXh5eHl5eXp5enl6eXp7ent6e3p7e3t7fHt8e3x8fHx9fH1+fX59fn9+f35/gH+AgICAgICAgYGAgYKBgoGCgoKDgoOEg4SEhIWFhIWFhoWGhYaGhoaHhoeGh4aHhoeIh4iHiIeHiIeIh4iHiIeIiIiHiIeIh4iHiIiHiIeIh4iHiIeIh4eIh4eIh4aHh4aHhoeGh4aHhoWGhYaFhoWFhIWEhYSFhIWEhISDhIOEg4OCg4OCg4KDgYKCgYKCgYCBgIGAgYCBgICAgICAgICAf4B/f4B/gH+Af35/fn9+f35/fn1+fn19fn1+fX59fn19fX19fH18fXx9fH18fXx9fH18fXx8fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x8e3x7fHt8e3x7fHx8fXx9fH18fX5+fX59fn9+f35+f35/gH+Af4B/gICAgICAgICAgICAgYCBgIGAgIGAgYGBgoGCgYKBgoGCgYKBgoGCgoKDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KCgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGBgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCAgICBgIGAgYCBgIGAgYCBgIGAgYCBgExJU1RCAAAASU5GT0lDUkQMAAAAMjAwOC0wOS0yMQAASUVORwMAAAAgAAABSVNGVBYAAABTb255IFNvdW5kIEZvcmdlIDguMAAA" />
</audio>
A Data URI takes the format: data:[][;charset=][;base64], The MIME-type specifies what type of data the URI contains. 数据URI采用以下格式：data：[] [; charset =] [; base64]，MIME类型指定URI包含的数据类型。 The charset in which it is encoded. 编码的字符集。 last the encoded data 最后编码数据
解决方案2
0 2015-06-02 09:21:39
You need to prefix the data:audio/mp3;base64, to the Data URI. 您需要将data:audio/mp3;base64,前缀data:audio/mp3;base64,到数据URI。 Use this instead: 请改用：
<audio controls autoplay="">
<source src="data:audio/mp3;base64,<?php echo $row['data']; ?>">
</audio>
解决方案3
0 2015-06-02 09:22:17
It looks like you are using wrong variable to set the source. 看起来您使用了错误的变量来设置源。 You don't have $row['data'] defined in your php code. 您没有在PHP代码中定义$row['data'] 。 Maybe it should be $rloc instead: 也许它应该是$rloc而不是：
<audio controls autoplay="">
<source src="<?php echo $rloc; ?>">
</audio>
Edit: 编辑：
Did you convert uploaded file (3gpp) to other formats (mp3, ogg), or did you just rename it to a different extension? 您是否将上传的文件（3gpp）转换为其他格式（mp3，ogg），或者您只是将其重命名为其他扩展名？ Looking at binary data at links you posted in comments to other answer this is your situation: all links you posted are exactly the same file, with different name. 查看您在评论中发布的链接上的二进制数据，这是您的情况：您发布的所有链接都是完全相同的文件，名称不同。 Binary, they are identical, just file name is different. 二进制，它们是相同的，只是文件名不同。 Format details for the file which is on all your links are: 所有链接上的文件格式详细信息如下：
Format : MPEG-4
Format profile : 3GPP Media Release 4
Codec ID : 3gp4
You can not just change file extension and expect it will play in browser. 您不仅可以更改文件扩展名，还可以预期它将在浏览器中播放。 You need to convert file to other format. 您需要将文件转换为其他格式。 You can use ffmpeg or any other conversion tool to convert from 3gpp to mp3 and ogg. 您可以使用ffmpeg或任何其他转换工具将3gpp转换为mp3和ogg。
解决方案4
0 2015-06-02 09:24:59
I found this short example: 我找到了这个简短的例子：
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
May it's helpful. 愿它有用。
解决方案5
0 2019-07-30 01:54:35
It is possible to use a Data URI for audio, as others have suggested. 它可以使用数据URI音频，正如其他人建议。 However, it's not a good idea. 但是，这不是一个好主意。 Not only are you adding 33% overhead for this encoding, and the CPU overhead on both ends, but there is a 1 MB limit which won't take long to hit with audio. 这种编码不仅会增加33％的开销，而且两端的CPU开销也会增加，但是有1 MB的限制，不会花费很长时间来处理音频。
If you must serve your audio data this way, you can simply reference your PHP script which outputs nothing but raw binary audio data. 如果您必须以这种方式提供音频数据，您可以简单地引用您的PHP脚本，它只输出原始二进制音频数据。
<audio src="/audio.php?id=12345"></audio>
Be sure to set the appropriate Content-Type header. 请务必设置适当的Content-Type标头。
Finally, note that you have serious security issues in your code. 最后，请注意您的代码中存在严重的安全问题。 As it stands right now, anyone can write pretty much whatever they want to whatever path they want on your hard drive, because you're letting them specify the filename on disk which can contain ../ . 就目前而言，任何人都可以在硬盘上写任何他们想要的任何路径，因为你让他们在磁盘上指定可以包含../的文件名。 Also, your SQL is subject to SQL injection attacks. 此外，您的SQL受SQL注入攻击。 Use prepared/parameterized queries to avoid this issue entirely. 使用准备/参数化查询来完全避免此问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.