关键词：
【中文标题】TypeError JavaScript 音频文件【英文标题】：TypeError JavaScript Audio File 【发布时间】：2018-12-24 11:39:44 【问题描述】：我已经构建了我的自定义音乐播放器，它使用我的一些自定义公式来计算曲目时长等。您可以看到 NaN 错误。 抱歉，gif 质量低。
它是用 javascript 制作的，我想通过将它做成一个插件左右与开源社区分享，并且不会出现任何明显的问题，除了每次播放歌曲时都会出现烦人的错误。
TypeError - 无法在“HTMLMediaElement”上设置“currentTime”属性：提供的双精度值是非有限的。
const myAudio = document.getElementById('myAudioElement'); //audio HTML5 element
const mySongNames = ['Týr - Ormurin Langi'.....];
const mySongFiles = ['audio0.mp3', 'audio1.mp3', 'audio2.mp3', 'audio3.mp3', 'audio4.mp3', 'audio5.mp3', 'audio6.mp3'];
const mySongLyrics = [....
];
const amountOfSongs = mySongNames.length - 1;
var playPauseCounter = 0; //determines if we play or pause
var songCounter = 0; //current song
var gradCounter = 0;
$('#player-background').css('padding', '12px');
function enableGradient()
$('#myPlayer').css('padding', '');
$('#myPlayer').css('background', '');
$('#player-background').addClass('gradient');
function disableGradient()
$('#player-background').removeClass('gradient');
$('#player-background').attr('style', '');
if (Cookies.get('mode') == 'light')
$('#player-background').css('padding', '12px');
$('#myPlayer').css('background', '#FFF');
else
$('#player-background').css('padding', '12px');
$('#myPlayer').css('background', '#000');
$('#toggleImages').click(function(event)
event.preventDefault();
$('#cbx').trigger('click');
);
$('#cbx').click(function()
if (gradCounter == 0 || gradCounter % 2 === 0)
enableGradient();
gradCounter++;
else
disableGradient();
gradCounter++;
);
//here we deal with every second passed
//and update times accordingly
$('#myAudioElement').on('timeupdate', function()
//current time elapsed
var currentMins = parseInt(Math.floor(myAudio.currentTime / 60));
//total length of the song
var totalMins = parseInt(Math.floor(myAudio.duration / 60));
//number of seconds in current time
var currentRest = parseInt(Math.floor(myAudio.currentTime - currentMins * 60));
//number of seconds in total time
var totalRest = parseInt(Math.floor(myAudio.duration - totalMins * 60));
//set current time text
$('#currentTime').text(`$currentMins m $(currentRest) s`);
//set total time text
$('#totalTime').text(`$totalMins m $totalRest s`);
//width of the bar according to progress
$('#myRange').val(myAudio.currentTime * 100 / myAudio.duration);
);
//deal with music ending
$('#myAudioElement').on('ended', function(event)
event.preventDefault();
//if last song in playlist ended go to beggining
if (songCounter == amountOfSongs)
songCounter = 0;
myAudio.src = `music/$mySongFiles[songCounter]`;
myAudio.currentTime = 0;
playAudio();
else if (songCounter < amountOfSongs)
songCounter++;
myAudio.src = `music/$mySongFiles[songCounter]`;
myAudio.currentTime = 0;
playAudio();
);
function playAudio()
console.log('Attempting to play audio!');
$('#myAudioElement').trigger('play');
$('#title').text(mySongNames[songCounter]);
$('#linkToLyrics').attr('href', mySongLyrics[songCounter]);
function pauseAudio()
console.log('Attempting to pause audio!');
$('#myAudioElement').trigger('pause');
$('#title').text(mySongNames[songCounter]);
$('#linkToLyrics').attr('href', mySongLyrics[songCounter]);
//set volume according to input
$(document).on('input', '#myVolume', function()
$('#slider_value').html(parseInt($(this).val()));
myAudio.volume = parseInt($(this).val()) / 100;
);
//set time in track according to input
$(document).on('input', '#myRange', function()
$('#slider_value').html(parseInt($(this).val()));
myAudio.currentTime = (myAudio.duration * (parseInt($(this).val()) / 100));
);
//max volume
$('#volumeup').click(function()
$('#myVolume').val(100);
myAudio.volume = 1;
);
//min volume
$('#volumedown').click(function()
$('#myVolume').val(0);
myAudio.volume = 0;
);
//previous track
$('#back').click(function(event)
event.preventDefault();
//if its still first track, go back to the last
if (songCounter == 0)
songCounter = amountOfSongs;
myAudio.src = `music/$mySongFiles[songCounter]`;
myAudio.currentTime = 0;
playAudio();
$('#playpause').removeClass('fas');
$('#playpause').removeClass('fa-play');
$('#playpause').addClass('fas');
$('#playpause').addClass('fa-pause');
playPauseCounter++;
console.log(`Now Playing $mySongFiles[songCounter] with counter = $songCounter`);
else if (songCounter > 0)
songCounter--;
myAudio.currentTime = 0;
myAudio.src = `music/$mySongFiles[songCounter]`;
playAudio();
$('#playpause').removeClass('fas');
$('#playpause').removeClass('fa-play');
$('#playpause').addClass('fas');
$('#playpause').addClass('fa-pause');
playPauseCounter++;
console.log(`Now Playing $mySongFiles[songCounter] with counter = $songCounter`);
);
//next track
$('#next').click(function(event)
event.preventDefault();
if (songCounter == amountOfSongs)
songCounter = 0;
myAudio.src = `music/$mySongFiles[songCounter]`;
myAudio.currentTime = 0;
playAudio();
$('#playpause').removeClass('fas');
$('#playpause').removeClass('fa-play');
$('#playpause').addClass('fas');
$('#playpause').addClass('fa-pause');
console.log(`Now Playing $mySongFiles[songCounter] with counter = $songCounter`);
else if (songCounter < amountOfSongs)
songCounter++;
myAudio.src = `music/$mySongFiles[songCounter]`;
myAudio.currentTime = 0;
playAudio();
$('#playpause').removeClass('fas');
$('#playpause').removeClass('fa-play');
$('#playpause').addClass('fas');
$('#playpause').addClass('fa-pause');
console.log(`Now Playing $mySongFiles[songCounter] with counter = $songCounter`);
);
//play and pause, change icon too
$('#playpause').click(function(event)
event.preventDefault();
if (playPauseCounter === 0 || playPauseCounter % 2 === 0)
myAudio.src = `music/$mySongFiles[songCounter]`;
$('#playpause').removeClass('fas');
$('#playpause').removeClass('fa-play');
$('#playpause').addClass('fas');
$('#playpause').addClass('fa-pause');
playAudio();
else if (playPauseCounter === 1 || playPauseCounter % 2 === 1)
$('#playpause').removeClass('fas');
$('#playpause').removeClass('fa-pause');
$('#playpause').addClass('fas');
$('#playpause').addClass('fa-play');
pauseAudio();
playPauseCounter++;
);
【问题讨论】：
如果没有完整的问题示例，这将很难调试。$(this).val() 在on('input') 函数中的值是多少？是数字吗？
jjba.ddnsking.com
【参考方案1】：
如果它是一个整数，那么无论在哪里接受像 $(this).val() 这样的输入
parseInt($(this).val());
这样可以避免 NaN 错误。
编辑：如下所示：
myAudio.volume = parseInt($(this).val()) / 100;
);
$(document).on('input', '#myRange', function()
$('#slider_value').html($(this).val());
myAudio.currentTime = (myAudio.duration * (parseInt($(this).val()) / 100));
);
$('#volumeup').click(function()
$('#myVolume').val(100);
myAudio.volume = 1;
【讨论】：
请看编辑。我应用了这个建议，现在错误只是非常短暂地出现并消失了，对我来说已经足够好了，但我会喜欢任何建议！感谢您的智慧先生@Sindhoor 即使在执行 Math.floor() 时也会返回 int 值，因此无需再次解析 int。但在内部，myAudio.duration、myAudio.currentTime 等并不确切知道它是字符串格式的整数还是整数。所以最好在计算之前解析它。比如： Math.floor(parseInt(myAudio.currentTime) - currentMins * 60) 。这可能会有所帮助。 还有一个： int 不需要 === 比较。您可以将“ if (gradCounter == 0 || gradCounter % 2 === 0) ”更改为“ if (gradCounter == 0 || gradCounter % 2 == 0) ” 感谢您的帮助！ NaN 现在仅在加载音乐之前发生，这完全没问题且合乎逻辑。基本上 20 微秒左右，多亏了您的建议，代码更安全且防故障。祝大家圣诞快乐，特别是您先生！是否可以最好使用javascript混合多个音频文件
】是否可以最好使用javascript混合多个音频文件【英文标题】：Isitpossibletomixmultipleaudiofilesontopofeachotherpreferablywithjavascript【发布时间】：2016-11-1302:58:58【问题描述】：我想合并音频剪辑，彼此叠加，以便它们同步播放并保存在新... 查看详情
将音频文件存储在 html5 本地存储中 - 使用 javascript 下载音频文件
】将音频文件存储在html5本地存储中-使用javascript下载音频文件【英文标题】：Storingaudiofilesinhtml5localstorage-downloadingaudiofileswithjavascript【发布时间】：2011-12-0313:19:59【问题描述】：我搜索了一下，发现html5不支持直接存储音频。我... 查看详情
使用Javascript播放数组序列音频文件[重复]
】使用Javascript播放数组序列音频文件[重复]【英文标题】：UsingJavascripttoplayanarraysequenceaudiofiles[duplicate]【发布时间】：2017-07-0521:53:35【问题描述】：我是Javascript的初学者。我正在尝试做一个可以连续播放数组音频文件的小项目... 查看详情
按顺序播放多个音频文件（Javascript）
】按顺序播放多个音频文件（Javascript）【英文标题】：Playmultipleaudiofilesinsequence(Javascript)【发布时间】：2019-09-2416:49:02【问题描述】：有人可以解释这种行为吗？我有一个按钮，当它被点击时，我需要依次播放6个mp3文件。我正... 查看详情
.wav 音频文件无法播放 - Javascript
】.wav音频文件无法播放-Javascript【英文标题】：.wavaudiofileswillnotplay-Javascript【发布时间】：2015-08-3011:07:38【问题描述】：我在播放.wav文件时遇到问题。这是我获取文件的代码：vartableHitSound=newAudio("707Rim.wav");为了播放它：... 查看详情
JavaScript 音频持续时间不适用于 ALAC 文件（HTML 音频持续时间属性）
】JavaScript音频持续时间不适用于ALAC文件（HTML音频持续时间属性）【英文标题】：JavaScriptaudiodurationnotworkingforALACfiles(HTMLaudiodurationproperty)【发布时间】：2019-01-0401:07:19【问题描述】：我在一些JS代码中使用以下实现来获取加载的... 查看详情
Javascript无延迟播放无限循环音频文件
】Javascript无延迟播放无限循环音频文件【英文标题】：Javascriptplayinganendlessloopaudiofilewithoutdelay【发布时间】：2021-09-1309:57:03【问题描述】：标题几乎是不言自明的。我想用JavaScript创建一个无限循环，但在读取（再次）相同的文... 查看详情
使用 Javascript/jQuery 一次播放一个 HTML 音频文件
】使用Javascript/jQuery一次播放一个HTML音频文件【英文标题】：PlayoneHTMLaudiofileatatimewithJavascript/jQuery【发布时间】：2016-02-0918:06:27【问题描述】：在我的页面中，每个键盘按键都会触发一个音频文件。对于字母A到Z，播放相应的音... 查看详情
如何在javascript中调整音频文件的音量[重复]
】如何在javascript中调整音频文件的音量[重复]【英文标题】：Howcaniadjustthevolumeofanaudiofileinjavascript[duplicate]【发布时间】：2017-09-0420:57:13【问题描述】：我有一个测验应用程序，它会在答案正确时播放音频文件..varaudio1=newAudio(\'aud... 查看详情
试图通过javascript从音频文件中获取分贝级别
】试图通过javascript从音频文件中获取分贝级别【英文标题】：Tryingtogetdecibellevelsfromanaudiofilethroughjavascript【发布时间】：2014-11-2121:38:46【问题描述】：我一直在看这里的信息：Isthereawaygetsomethinglikedecibellevelsfromanaudiofileandtransformth... 查看详情
Javascript - 从 mp3 文件录制音频
】Javascript-从mp3文件录制音频【英文标题】：Javascript-Recordaudiofrommp3file【发布时间】：2020-03-3100:32:43【问题描述】：我想使用MediaRecorder来录制现有的mp3文件。在调用captureStream()之后，我尝试将Audio元素作为源传递给MediaRecorder，但... 查看详情
是否可以将使用 javascript 生成的 html 音频录制到后端的音频文件中？
】是否可以将使用javascript生成的html音频录制到后端的音频文件中？【英文标题】：Isitpossibletorecordhtmlaudiogeneratedwithjavascripttoanaudiofileontheback-end?【发布时间】：2017-10-0901:01:47【问题描述】：我正在创建一个项目，该项目基本上由... 查看详情
如何在 JavaScript 中同步播放音频文件？
】如何在JavaScript中同步播放音频文件？【英文标题】：HowdoIplayaudiofilessynchronouslyinJavaScript?【发布时间】：2019-06-2719:53:19【问题描述】：我正在开发一个将文本转换为摩尔斯电码音频的程序。假设我输入sos。我的程序会将其转换... 查看详情
在 Javascript 中使用 FFT 计算音频文件的平均幅度
】在Javascript中使用FFT计算音频文件的平均幅度【英文标题】：CalculatingTheAverageAmplitudeofanAudioFileUsingFFTinJavascript【发布时间】：2016-01-2200:36:57【问题描述】：我目前正在参与一个项目，我想在给定的AAC文件中找到给定音频数据的... 查看详情
无法将音频文件上传到 Cloudinary API（使用 javascript）
】无法将音频文件上传到CloudinaryAPI（使用javascript）【英文标题】：UnabletouploadaudiofilestoCloudinaryAPI(withjavascript)【发布时间】：2021-05-1012:45:48【问题描述】：在我的react本机应用程序中，我实现了一个将图像上传到Cloudinary的功能，... 查看详情
如何将两个音频文件合并为一个并在javascript中合并后播放
】如何将两个音频文件合并为一个并在javascript中合并后播放【英文标题】：Howtomergetwoaudiofilesintooneandmakeitplayaftermergeinjavascript【发布时间】：2020-05-0512:17:29【问题描述】：我有一个要添加到背景中的曲目和一个录制的音频。我想... 查看详情
通过获取 .attr 使用 JavaScript/jquery 播放/暂停音频文件
】通过获取.attr使用JavaScript/jquery播放/暂停音频文件【英文标题】：Play/PauseaudiofilewithJavaScript/jquerybyfetching.attr【发布时间】：2015-09-2009:18:13【问题描述】：按下播放时，文件mp3应播放，再次单击时mp3应暂停。目标是从\'key\'中获... 查看详情
在特定时间播放音频文件的 JavaScript 程序似乎不起作用
】在特定时间播放音频文件的JavaScript程序似乎不起作用【英文标题】：JavaScriptprogramthatplaysanaudiofileatacertaintime,doesn\'tseemtowork【发布时间】：2020-12-1907:10:12【问题描述】：我是JavaScript的新手，所以我只是从互联网上提取了一个脚... 查看详情