Skip to content

Instantly share code, notes, and snippets.

@newswim
Last active August 29, 2015 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save newswim/03a2020f304bc4c2f63d to your computer and use it in GitHub Desktop.
Save newswim/03a2020f304bc4c2f63d to your computer and use it in GitHub Desktop.
Append an audio player to document
// Just reading through the MDN <audio> API docs, create and append child nodes
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
x = new Audio
// <audio preload=​"auto">​</audio>​
x.loop == true
// false
x.loop = true
// true
x
// <audio preload=​"auto" loop>​</audio>​
x.children
// []
y = .7
// .7
/* volume is set 0 - 1.0 */
x.volume = y
// 0.7
x.volume
// 0.7
x.src = "https://mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg"
x
// <audio preload=​"auto" loop src=​"https:​/​/​mdn.mozillademos.org/​files/​2587/​AudioTest%20(1)​.ogg">​</audio>​
x.controls
// false
x.controls = true
// true
x
// <audio preload=​"auto" loop src=​"https:​/​/​mdn.mozillademos.org/​files/​2587/​AudioTest%20(1)​.ogg" controls>​</audio>​
x.autoplay = true
// true
x
// <audio preload=​"auto" loop src=​"https:​/​/​mdn.mozillademos.org/​files/​2587/​AudioTest%20(1)​.ogg" controls autoplay>​</audio>​
/* create new node */
var p = document.createElement("p");
document.body.appendChild(p);
// <p>​</p>​
p.appendChild(x)
// <audio preload=​"auto" loop src=​"https://mdn.mozillademos.org/​files/​2587/​AudioTest%20(1)​.ogg" controls autoplay>​</audio>​
/* there should now be an audio player at the bottom of this document */
/* press play */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment