<audio> तत्व है, जो प्रति सेकंड तीन से चार बार गोली चलाई है timeupdate घटना का उपयोग, <audio> तत्व की .currentTime की जाँच करके मीडिया की स्ट्रीमिंग के दौरान सटीक एनिमेशन प्रदर्शन करने के लिए। जहां एनिमेशन या संक्रमण प्रति सेकंड कई बार शुरू या बंद किया जा सकता है।
तो ब्राउज़र पर उपलब्ध है, तो आप, ऑडियो संसाधन का अनुरोध करने के .then() वापसी response.body.getReader() जो संसाधन के एक ReadableStream रिटर्न पर fetch() उपयोग कर सकते हैं; एक नया MediaSource ऑब्जेक्ट बनाएं, MediaSource के <audio> या new Audio().srcobjectURL पर सेट करें; .read() परसे .mode"sequence" पर सेट किए गए पहले स्ट्रीम भाग को .read() पर अंकित करें। शेष हिस्सों को sourceBuffer पर sourceBufferupdateend ईवेंट पर संलग्न करें।
fetch() तो response.body.getReader() ब्राउज़र में उपलब्ध नहीं है, तब भी आप timeupdate या progress घटना <audio> तत्व की .currentTime जाँच, शुरू करने या मीडिया प्लेबैक स्ट्रीमिंग के लिए जरूरी दूसरे पर एनिमेशन या संक्रमण को रोकने के लिए उपयोग कर सकते हैं।
<audio> तत्व का उपयोग मीडिया चलाने के लिए करें जब स्ट्रीम ने MediaSource पर प्लेबैक के साथ आगे बढ़ने के लिए पर्याप्त बफर जमा किए हैं।
आप <audio> जहां एनीमेशन होने चाहिए की .currentTime करने के लिए इसी नंबर करने के लिए सेट गुण, और मूल्यों तत्व है जो सटीक एनिमेशन प्रदर्शन करने के लिए एनिमेटेड किया जाना चाहिए की css प्रॉपर्टी पर सेट के साथ एक वस्तु का उपयोग कर सकते हैं।
javascript पर, एनिमेशन प्रत्येक बीस दूसरी अवधि में होता है, 0 से शुरू होता है, और मीडिया प्लेबैक समाप्त होने तक हर साठ सेकंड में होता है।
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
width: 90vw;
height: 90vh;
background: #000;
transition: background 1s;
}
span {
font-family: Georgia;
font-size: 36px;
opacity: 0;
}
</style>
</head>
<body>
<audio controls></audio>
<br>
<span></span>
<script type="text/javascript">
window.onload = function() {
var url = "/path/to/audio";
// given 240 seconds total duration of audio
// 240/12 = 20
// properties correspond to `<audio>` `.currentTime`,
// values correspond to color to set at element
var colors = {
0: "red",
20: "blue",
40: "green",
60: "yellow",
80: "orange",
100: "purple",
120: "violet",
140: "brown",
160: "tan",
180: "gold",
200: "sienna",
220: "skyblue"
};
var body = document.querySelector("body");
var mediaSource = new MediaSource;
var audio = document.querySelector("audio");
var span = document.querySelector("span");
var color = window.getComputedStyle(body)
.getPropertyValue("background-color");
//console.log(mediaSource.readyState); // closed
var mimecodec = "audio/mpeg";
audio.oncanplay = function() {
this.play();
}
audio.ontimeupdate = function() {
// 240/12 = 20
var curr = Math.round(this.currentTime);
if (colors.hasOwnProperty(curr)) {
// set `color` to `colors[curr]`
color = colors[curr]
}
// animate `<span>` every 60 seconds
if (curr % 60 === 0 && span.innerHTML === "") {
var t = curr/60;
span.innerHTML = t + " minute" + (t === 1 ? "" : "s")
+ " of " + Math.round(this.duration)/60
+ " minutes of audio";
span.animate([{
opacity: 0
}, {
opacity: 1
}, {
opacity: 0
}], {
duration: 2500,
iterations: 1
})
.onfinish = function() {
span.innerHTML = ""
}
}
// change `background-color` of `body` every 20 seconds
body.style.backgroundColor = color;
console.log("current time:", curr
, "current background color:", color
, "duration:", this.duration);
}
// set `<audio>` `.src` to `mediaSource`
audio.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", sourceOpen);
function sourceOpen(event) {
// if the media type is supported by `mediaSource`
// fetch resource, begin stream read,
// append stream to `sourceBuffer`
if (MediaSource.isTypeSupported(mimecodec)) {
var sourceBuffer = mediaSource.addSourceBuffer(mimecodec);
// set `sourceBuffer` `.mode` to `"sequence"`
sourceBuffer.mode = "sequence";
fetch(url)
// return `ReadableStream` of `response`
.then(response => response.body.getReader())
.then(reader => {
var processStream = (data) => {
if (data.done) {
return;
}
// append chunk of stream to `sourceBuffer`
sourceBuffer.appendBuffer(data.value);
}
// at `sourceBuffer` `updateend` call `reader.read()`,
// to read next chunk of stream, append chunk to
// `sourceBuffer`
sourceBuffer.addEventListener("updateend", function() {
reader.read().then(processStream);
});
// start processing stream
reader.read().then(processStream);
// do stuff `reader` is closed,
// read of stream is complete
return reader.closed.then(() => {
// signal end of stream to `mediaSource`
mediaSource.endOfStream();
return mediaSource.readyState;
})
})
// do stuff when `reader.closed`, `mediaSource` stream ended
.then(msg => console.log(msg))
}
// if `mimecodec` is not supported by `MediaSource`
else {
alert(mimecodec + " not supported");
}
};
}
</script>
</body>
</html>
plnkr http://plnkr.co/edit/fIm1Qp?p=preview
मुझे नहीं लगता कि वहाँ अंतर को मापने के लिए एक रास्ता है, तो मैं आमतौर पर धारा ग्राहक का विश्लेषण WebAudioAPI का उपयोग कर ब्राउज़र में पक्ष। उस तकनीक का उपयोग करके आप एनीमेशन (उदाहरण के लिए तुल्यकारक) बना सकते हैं जो ब्राउज़र में खेले जाने वाले आइसकास्ट स्ट्रीम के साथ निकटता से संबंधित होगा। –