This is probably an odd question, but for fun i recreated the Spotify layout to their app in codepen, now I want to add some functionality, is there a way I can get music to play using JS or jQuery?
My first thought was to embed the video and hide it behind the play button, but that doesn't quite work for me.
Is there a way I can set a var where I set it = to a url, then use an onclick or toggle command to play the url?
The only way I could think about going this would be:
var expirePrettyLow = 'url:www.fake.com'
$('#play').toggle(
function(){
//play youtube link?
);
I hope this makes sense, is there an api I can call to just get the mp3s? I don't want to upload them since it's just linking, not trying to make a product out of this, just to add to portfolio.
For reference here is my codepen link.
Thanks for whatever advice/direction you can give me!
EDIT: To clarify, by 'linked' and not 'loaded'
I would like to accomplish this by linking to a url (ie: href="") as opposed to saving it in my directory and loading it through a filepath (ie: music/tracks/expire-prettylow.mp3)
User a blank audio tag and set the play button's onClick to "var newSrc = newSource.com/song.mp3; playTrack()", and have the playTrack() function load and play the song. Here's an example of a code that changes the source of the audio element then plays the new source.
<script>
function playTrack(){
var music = document.getElementById("myAudio");
music.src = newSrc;
music.load();
music.play();
}
</script>
<audio id="myAudio" src="">
Audio tag not supported
</audio>
Click a song to play it:
<ul>
<li onClick="newSrc = 'http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3'; playTrack()">People are Strange</li>
<li onClick="newSrc = 'http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3'; playTrack()">Oh What a Night</li>
</ul>
Set the src with JavScript, music.load(), then music.play()
Related
I'm supposed to have 5 animal images on the site, and whenever I hover over an animal, their characteristic sound plays. Is there a more efficient way to do this rather than using switch case?
This is what I have so far (works only for 1 animal):
HTML:
<img src="img/piggy.png" onmouseover="F1(this)">
JS:
function F1(img) {
var audio = document.getElementById("audio");
audio.play();
}
I think this is a really solid base. If it were me I would do almost exactly what you are doing but set up an array with the list of available sound bites. Then, onmouseover pass in a number (0-5) and use that as the selector to choose which soundbyte plays.
var sounds = ["sound1", "sound2", "sound3", "sound4", "sound5"];
function playAudio(track) {
audio.play(sounds[track]);
}
Hopefully that's clear/helpful. Otherwise, let me know and I'll be glad to clarify.
You can have the sound to play embedded in the img tag's dataset :
<img src="img/piggy.png" data-sound='piggy.wav' onmouseover="playSound(this)">
function playSound(element) {
var audio = new Audio(element.dataset.sound);
audio.play();
}
you may want to pre-load all of the audio files on page load
Is there a way we can play audio sound or Gif image on Google AppMaker? I have tried the following to play .sound that I kept as HTML containing the .mp3 file src I copied from the Resources.
var page = app.pages.RateToilet;
var x = page.descendants.sound;
function playAudio() {
x.play();
}
I got the following error
x.play is not a function
at playAudio (client:24:7)
at RateToilet.Image7.onClick:5:3
Please advise .. Thanks :)
To play a .gif file is pretty straight forward. After you've uploaded the file to the resources section of appmaker, you simply need to drag and drop as shown below.
Now, to play a sound you've saved inside the resources, please do the following:
1) Add a button widget and set its text property to "play sound".
2) Add the following code to the onClick event of the button widget:
var track = "";
var audio = document.getElementById("audio");
audio.setAttribute("src", track);
if(widget.text === "play sound") {
widget.text = "stop sound";
audio.play();
} else {
widget.text = "play sound";
audio.pause();
audio.currentTime = 0;
}
3) Add an HTML widget below the button widget.
4) Make sure to check the allowUnsafeHtml checkbox
5) Put the following inside the HTML widget html value:
<audio id="audio"></audio>
6) Next, go to the html display section and make sure to uncheck visible and set visibility type to hidden, just as shown below
7) Finally, go to the resources section of appmaker, copy the resource URL and paste its value inside the onClick event of the button widget, so that var track equals to that value. See below:
I built this little demo app for you hoping it could help you.
You can download from here. I hope it helps!
I've been using SublimeVideo, and I've done so much with it already for the site I'm working on.
I've got 15-20 videos that I'm successfully using via SublimeVideo on a site in the basic way, by having a link on the page the user clicks on, and when clicked, the video opens in the SublimeVideo lightbox and starts playing.
But now, I'm needing to create "shorter URLs" for these videos that can be sent out in print publications and emails, and where the user is taken to the website to view, not just the video file.
Ideally, I was hoping to just use the id/data-uid with a hashtag in a single-page url and have the chosen video to automatically launch'n'play within the lightbox. That seems to be impossible (?).
I could settle with having a single page with the video tags hidden and have the hashtag unhide it and play it when in the URL. If none of this can work in a slick way, maybe I'll just go old-school and make a page for each video and just embed it in the page..
Anyway, after scouring all the documentation pages, their forums, and searching the web, I've only found a couple of options - neither of which have actually worked. I'll paste them below:
First, here's an example of the HTML I'm using for all the videos:
<p class="">video1 text link on page</p>
<video id="video1" data-uid="video1" title="video1 description" poster="/assets/images/video1.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/video1.mp4" />
</video>
That, by itself, works great! I don't want to change that. When the text link is clicked, the lightbox opens and the video plays perfectly.
So, let's say the page that holds the 15-20 videos with the above code for them is at:
http://example.com/resources/index.php
I thought I could simply make that URL for the first video:
http://example.com/resources/index.php#video1
...or even better...
http://example.com/resources#video1
...and follow suit for all the other video IDs.
And to get that to work, I've tried:
<script type="text/javascript">
sublimevideo.ready(function()
{
if (window.location.hash == '#video1') {
sublime('video1').play();
} else
if (window.location.hash == '#video2') {
sublime('video2').play();
} else
if (window.location.hash == '#video3') {
sublime('video3').play();
}
});
</script>
...that doesn't work. For some reason it works with whatever the first video is on the page, but by "work" I mean, it unhides it and makes it playable, not open in the lightbox and auto play.
So then I found code in the sharing documentation area like this:
<script type="text/javascript">
var hashtag = "#video1";
var hashtag = "#video2";
var hashtag = "#video3";
if (document.location.hash == hashtag) {
showTheVideo(hashtag);
}
function showTheVideo(hashtag) {
}
</script>
...but that doesn't work either.
Could somebody that does know JavaScript please spell it out for me?
I'll put the code that fixed the issue for me here in hopes it helps somebody else someday that may search and find it.
By putting the below code in the head of the page, under the...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/UniqueIDprovidedInYourAccountGoesHere.js"></script>
...library (which is the random characters/numbers .js that SublimeVideo gives you in your account area), I was able to finally get the above detailed problem to work (YAY!!!).
So, using the same example as above, this URL now works as I needed (by not only taking you to the resources page, but also by launching the particular video in its lightbox).
http://example.com/resources.php#video=interview2
...and by putting:
RewriteRule ^resources$ resources.php [L]
...in the .htaccess file in the same dir, I was able to make it even easier for the user:
http://example.com/resources#video=interview2
As I understand it, the below JavaScript addition finds the hash, then looks for the "video=", then takes whatever is after that, and if it finds a matching "id" in an "a" tag, then it tells it to do it's SublimeVideo thing by launching that video in the lightbox. Brilliant!
<script type="text/javascript">
$(document).ready(function () {
var lochash = location.hash.substr(1);
var mylocation = lochash.substr(lochash.indexOf('video='))
.split('&')[0]
.split('=')[1];
sublime.ready(function () {
var lightbox = sublime.lightbox(mylocation);
lightbox.open();
});
});
</script>
Here's the HTML part (for reference):
<p class="">video2 text link on page that i left as reference for the user in case they close the video that was launched from the publication</p>
<video id="video2" data-uid="video2" title="video2 description" poster="/assets/images/interview2.jpg" width="1084" height="574" style="display:none" data-autoresize="fit" preload="none">
<source src="/assets/videos/interview2.mp4" />
</video>
Also note: I found out through trial and error that the name of the video in the URL, after the "#video=" must be the same as the "ID" in the "A" tag, not the "video" tag! So, you'll notice that the "id=" is (and needs to be) different between the two. The "id=" in the "video" tag is instead the same as the "href=".
Simple call to player for 6 second clip works fine on main index page
<audio autoplay id="theme"><source src="sounds/theme.mp3"><source src="sounds/theme.ogg"></audio>
Have also added a simple button and associated java script to allow those who don't want the background music to turn it off.
<input type="button" id=musicbtn class="btn" value="Stop da Music!" onclick="player(); change();">
<script>
function player()
{
var player= document.getElementById("theme");
if(player.paused) player.play();
else player.pause();
}
function change()
{
var elem = document.getElementById("musicbtn");
if (elem.value=="Stop da Music!") elem.value = "Play da Music!";
else elem.value = "Stop da Music!";
}
All works as advertised, but looking for solution to have background music autoplay only the first time a visitor loads index.html. Subsequent visits autoplay should not function.
Suggestions? PHP, JS, etc are all acceptable solutions.
Have an ugly kludge in place involving navigation menu pointing to index2.html (which does not contain the audio tag) but not elegant, and a future pita. If you need to see further markup...
http://sailingofftheedge.com
Set a cookie with JavaScript's "document.cookie", and have your page test whether the cookie exists yet every time the user visits. If it does, you can return;, if not, you would set the cookie, then run the music.
Look at: W3Schools Cookie Tutorial for more info/tips.
Site plays a full screen video with sound. The site was designed to play the video without sound. When a link is clicked the other portions of the site appear on top of the video.
Unfortunately the client has insisted on having sound, so when something is clicked you still hear the music until the video ends. I know it is possible to have the video stop or even have it muted when a link is clicked but I cannot seem to understand where exactly to implement this. Your help is appreciated. I'm not a jquery person so I'm rather dim on this. Site uses the YTPlayer ( http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/ )
The site: http://www.bradfordweb.com/clients/concannon2/
The code in the page that is playing the video is:
<a id="P2" class="player" data-property="{videoURL:'http://youtu.be/OgAr2jQr3rg',containment:'#home',autoPlay:true, mute:false, loop:false, opacity:.6}"></a>
The link is:
<div class="link-home"><div class="cl-effect-8"><span>ABOUT US</span> </div></div>
I tried:
onclick="stop()"
and
stopYTP
I found the function in the jquery.mb.YTPlayer.js file:
stopYTP: function () {
var YTPlayer = this.get(0);
var controls = jQuery("#controlBar_" + YTPlayer.id);
var playBtn = controls.find(".mb_YTVPPlaypause");
playBtn.html(jQuery.mbYTPlayer.controls.play);
YTPlayer.player.stopVideo();
},
Help?
I've had this issue as well and found it in the onYouTubePlayerReady function.
Look for it in that file and do the following changes:
function onYouTubePlayerReady(playerId) {
var player=$("#"+playerId);
player.mb_setMovie();
// Remove or comment out the lines below.
// $(document).on("mousedown",function(e){
// if(e.target.tagName.toLowerCase() == "a")
// player.pauseYTP();
// });
}
That line just simply binds the mousedown event on an a tag and consequently pauses the player.
Hope that helps.