HTML5 音频标签动态 src ajax 它不播放答案

【问题标题】：HTML5 audio tag dynamic src ajax it does not playHTML5 音频标签动态 src ajax 它不播放
【发布时间】：2016-01-09 07:06:54
【问题描述】：

我正在使用 Ajax 从数据库中获取音频源。我成功拿了数据，但问题是它不能播放。

<label>balay</label>
<audio id="audio" src="" type="audio/wav">

这是 HTML

$('label').hover(function(){
var ex = $(this).html();
$.post('../php/fetchAudiosrc.php' , {input:ex} , function(data){
    $('#audio').attr("src", data);
    $('#audio').get(0).play();
}

我不需要显示 fetchAudiosrc.php，因为它返回正确的数据。问题是音频没有真正播放。

【问题讨论】：

试试$('#audio').play();
您不能将音频媒体的原始数据直接设置到音频的 src 中，您必须将其转换为 blobURI (audio.src = URL.createObjectURL(new Blob([data], 'audioMIMEType')); 或使用原生 XMLHttpRequest with将其.responseType 设置为'blob'，或者将其设置为dataURI audio.src = 'data:audio/audioType, base64'+ btoa(data)。但最简单的方法仍然是离开ajax 调用并直接将音频src 设置为正确的url。
@Azzi 我试过了。已经。
@Kaiido 对不起，我只是初学者。我不明白 blob 或 dataURI。但我所知道的是直接设置音频源。我正在使用此代码制作很多页面，这就是为什么需要它是动态的。
如果您尝试console.log(data)，您会看到它是您文件的原始数据。浏览器不能仅仅将其用作音频元素的来源。你必须转换它。 Blobs 可以代表一个文件。您可以从数据中创建一个，也可以要求 xhr 本身直接返回一个 blob。然后，您可以通过 URL API 创建一个 blobURI。

标签： javascript jquery ajax dynamic-programming html5-audio

【解决方案1】：

HTML 在一个文件夹中，所以我将 scr witg 连接起来 ../ 抱歉打扰了。感谢您光临。

$('label').hover(function(){
var ex = $(this).html();
$.post('../php/fetchAudiosrc.php' , {input:ex} , function(data){
    $('#audio').attr("src", '../'+data);
    $('#audio').get(0).play();
}

【讨论】：