音频标签HTML5

Audio Tag HTML5

本文关键字：HTML5 标签 音频      更新时间：2023-09-26

我用HTML,CSS &JS .

我用任意歌曲解析一个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
  });`

我的问题是:当我弹了很长时间，换了几首歌的时候。无论我做什么，玩家都会停止，崩溃，玩家不会运行，进入永远停止的状态。我在开发人员工具中看到有一个名为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>
相关文章：