強制JS中的音頻庫加載
[英]Force Audio library in JS to load
問題描述
我想獲得音頻長度而不必播放然后暫停然后再次播放以獲得音頻長度/持續時間？
調用的函數將是： this.createRangeElement
但由於某種原因，它輸出“NaN”，那么我將如何強制音頻渲染？
function get_uai(){ return new uai(); } function uai(){ var AE = new Audio(); var played = false; this.src = ""; this.set_src = function(){ AE.src = this.src; AE.load(); } this.play = function(){ if(played == true){ AE.play(); }else{ AE.src = this.src; played = true; AE.play(); } }; this.pause = function(){ AE.pause(); } this.stop = function(){ window.aui = undefined; } this.createRangeElement = function(){ var min = "0"; AE.load(); var max = AE.duration; console.log(max); } } // Getting the UAI API var aud = get_uai(); // Setting the source aud.src = "http://crossorigin.me/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3"; aud.set_src(); // Creating a range element aud.createRangeElement(); // Playing the sound //aud.play()
<html> <head> <title>Music Player</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <em class="fa fa-pause" onclick="aud.pause();"></em> <em class="fa fa-play" onclick="aud.play();"></em> </body> </html>
1 個解決方案
解決方案1
0 已采納 2016-11-15 07:37:37
您可以使用oncanplaythrough事件來檢測音頻持續時間數據是否可用。
function get_uai() { return new uai(); } function uai() { var AE = new Audio(); var played = false; this.src = ""; this.set_src = function() { AE.src = this.src; AE.load(); } this.play = function() { if (played == true) { AE.play(); } else { AE.src = this.src; played = true; AE.play(); } }; this.pause = function() { AE.pause(); } this.stop = function() { window.aui = undefined; } this.createRangeElement = function() { var min = "0"; AE.load(); AE.oncanplaythrough = function() { var max = AE.duration; console.log(max); } } } var aud = get_uai(); aud.src = "http://crossorigin.me/https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3"; aud.set_src(); aud.createRangeElement();
<html> <head> <title>Music Player</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <em class="fa fa-pause" onclick="aud.pause();"></em> <em class="fa fa-play" onclick="aud.play();"></em> </body> </html>
強制JS在頁面加載時加載
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.