Javascript 音频标签HTML5

我用HTML、CSS和JS制作了一个web应用程序

我解析带有url的xml和任何歌曲，并用这些歌曲装载播放器

我为JS编写了以下代码来更改歌曲：

var newSongHtml = '<div class="navbar-header" id="playersongs">';
  newSongHtml += ' <h3>' + nombreChannelActual + ' - ' + categoriaActual + '</h3>';
  newSongHtml += '<div class="audio-player">';
  newSongHtml += ' <h2>' + currentSongName + '</h2>';
  newSongHtml += '<audio id="audio-player" src="' + currentSong + '" type="audio/mp3" ontimeupdate="onTimeUpdateCurrentSong(\'' + currentPlayList + '\')" onended="changeCurrentSong(\'' + currentPlayList + '\');" onerror="checkErrorWhenWillPlaySong(\'' + currentPlayList + '\')" controls="controls"></audio>';
  newSongHtml += '</div>';
  newSongHtml += '</div>';

  $('#playersongs').replaceWith(newSongHtml);

  $('#audio-player').mediaelementplayer({
      alwaysShowControls: true,
      features: ['playpause','progress','currenttime','duration'],
      audioWidth: 450,
      audioHeight: 40,
      iPadUseNativeControls: false,
      iPhoneUseNativeControls: false,
      AndroidUseNativeControls: false
  });`

var newSongHtml=''；
newSongHtml+=''+nombreChannelActual+'-'+CategoriaaActual+''；
newSongHtml+=''；
newSongHtml+=''+currentSongName+''；
newSongHtml+=''；
newSongHtml+=''；
newSongHtml+=''；
$（#playersongs'）。替换为（新闻歌曲HTML）；
$（“#音频播放器”）.mediaelementplayer({
alwaysShowControls:对，
特性：['playpause'、'progress'、'currenttime'、'duration']，
音频宽度：450，
身高：40，
iPadUsenactiveControl:false，
iPhoneUseNativeControl:false，
AndroidUseNativeControl:错误
});`

我的问题是：

---

当我演奏了很长时间并且换了几首歌的时候。玩家停止，崩溃，玩家不跑，进入状态永远停止，不管我做什么。 我在开发人员工具中看到有一个名为media的文件夹，其中文件存储在PART_32435435.mp3中

我想可能是这样，因为控制台没有告诉我任何错误

---

这可能就是问题所在吗？我怎样才能删除它呢？

是因为歌曲名称中只有一个引号吗？这可能会破坏脚本中的

src=“+currentSong+”

，除非它在某个地方转义。我用第二首歌测试了这一点，它在文件名中包含一个引号，它可以工作

<div id="playersongs"></div>
<script>
var nombreChannelActual = "nombreChannelActual";
var categoriaActual = "categoriaActual";
var currentPlayList = ["Michael Jackson - Remember The Time.mp3","Michael Jackson - Can't Let Her Get Away.mp3","Michael Jackson - Dangerous.mp3"];
var currentSongName = currentPlayList[0].split('.')[0];
var currentSong = currentPlayList[0];

function onTimeUpdateCurrentSong(a){
//console.log("!");
}

function canplay(){
//play when buffered enough to begin
$('audio').on('canplay', function() {
    this.play();
});
}

function changeCurrentSong(){
var current_song = $('#audio-player').attr("src");
var current_song_position = currentPlayList.indexOf(current_song);
if(current_song_position == currentPlayList.length-1){
    //it has reached the end, go back to first song
    $('#audio-player').attr("src",currentPlayList[0]);
    $('#current_song_name').html(currentPlayList[0].split('.')[0]);
    canplay();
}
else {
    //play next song
    $('#audio-player').attr("src",currentPlayList[current_song_position+1]);
    $('#current_song_name').html(currentPlayList[current_song_position+1].split('.')[0]);
    canplay();
}
}

var newSongHtml = '<div class="navbar-header" id="playersongs">';
newSongHtml += ' <h3>' + nombreChannelActual + ' - ' + categoriaActual + '</h3>';
newSongHtml += '<div class="audio-player">';
newSongHtml += " <h2 id='current_song_name'>" + currentSongName + "</h2>";
newSongHtml += "<audio id='audio-player' src='" + currentSong + "' type='audio/mp3' onended='changeCurrentSong();' controls='controls' autoplay></audio>";
newSongHtml += '</div>';
newSongHtml += '</div>';

$('#playersongs').replaceWith(newSongHtml);

</script>

var nombreChannelActual=“nombreChannelActual”；
var categoriaActual=“categoriaActual”；
var currentPlayList=[“迈克尔·杰克逊-记住时间.mp3”，“迈克尔·杰克逊-不能让她离开.mp3”，“迈克尔·杰克逊-危险的.mp3”]；
var currentSongName=currentPlayList[0]。拆分（'.'）[0]；
var currentSong=currentPlayList[0]；
函数onTimeUpdateCurrentSong（a）{
//console.log（“！”）；
}
函数canplay（）{
//缓冲足够开始时播放
$（'audio'）。在（'canplay'，function（）上{
这个。play（）；
});
}
函数changeCurrentSong（）{
var current_song=$（'audioplayer'）.attr（“src”）；
var current_song_position=currentPlayList.indexOf（当前歌曲）；
如果（当前歌曲位置==currentPlayList.length-1）{
//它已经走到了尽头，回到第一首歌
$（“#音频播放器”）.attr（“src”，currentPlayList[0]）；
$（'.'当前歌曲名称'）.html（当前播放列表[0].split（'.'）[0]）；
canplay（）；
}
否则{
//播放下一首歌
$（“#音频播放器”）.attr（“src”，当前播放列表[当前歌曲位置+1]）；
$（'.'当前歌曲名称'）.html（当前播放列表[当前歌曲位置+1].split（'.'）[0]）；
canplay（）；
}
}
var newSongHtml=''；
newSongHtml+=''+nombreChannelActual+'-'+CategoriaaActual+''；
newSongHtml+=''；
newSongHtml+=“”+currentSongName+“”；
newSongHtml+=“”；
newSongHtml+=''；
newSongHtml+=''；
$（#playersongs'）。替换为（新闻歌曲HTML）；

音量下降了吗？下移？到底发生了什么？进入状态永远停止。我解释得非常糟糕，没有错，我只是想理解。您可以在JSFIDLE或plnkr中重复这一点吗？你确定你没有将歌曲更改为未定义的源吗？Audio src是另一个网站上托管的mp3 url，我确信该源存在，因为我正在将播放列表的索引保存在缓存中，当我重新加载页面时，音频以这首歌开始播放。这是一个非常可行的答案。如果这能解决OPs的问题，我会很好奇哦，是的！！你是最棒的！！这段代码解决了这个问题。我一直在更换音频标签，现在我只更换了一次。但是出现了新问题，我设置了这个标签：当我用新方法更改当前歌曲时，自动播放只在第一个播放中起作用。这不是自动播放。你知道为什么会发生吗？我在IE/FF/Chrome中用本地文件测试了这一点，没有发现任何问题。如果在单击“播放”时播放下一首歌曲，可能是缓冲问题？如果是这种情况，您可以使用jquery启动canplay事件，如这里的注释所示